如何在指定容器中均匀且完整地拉伸固定数量的水平导航项目

我希望在一个900像素的容器中均匀地展开6个导航项目,其间还有一定的空白区域。 例如…

---| 900px Container |--- ---| HOME ABOUT BASIC SERVICES SPECIALTY SERVICES OUR STAFF CONTACT US |--- 

目前,我能find的最好的方法是:

 nav ul { width: 900px; margin: 0 auto; } nav li { line-height: 87px; float: left; text-align: center; width: 150px; } 

与此有关的问题是双重的。 首先,它并不是真正的理由,而是将li标签均匀地分布在ul标签中。在“HOME”或“ABOUT”等较小的菜单项和“BASIC SERVICES”之类的较大的菜单项之间创build不均匀的空白区域, 。

第二个问题是,如果导航项大于150像素,即使有足够的空间用于整个导航,SPECIALTY SERVICES也是如此。

任何人都可以解决这个问题吗? 我一直在网上搜寻解决scheme,而且他们似乎总是缺乏。 只有可能的CSS / HTML …

谢谢!

更新(7/29/13):使用表格单元是实现这种布局的最佳现代方式。 见下面的felix的答案。 table cell属性目前在94%的浏览器上工作 。 你将不得不做一些关于IE7和以下,但否则应该没问题。

更新(7/30/13):不幸的是,如果将此布局与“媒体查询”结合使用,会有一个影响此function的webkit错误。 现在你必须避免改变“显示”属性。 查看Webkit Bug。

更新(7/25/14):现在有一个更好的解决scheme,涉及到text-align:justify。 使用这个更简单,你将避免Webkit的错误。

在容器上使用text-align:justify ,这样无论你在列表中有多less元素,它都能工作(你不必为每个列表项目制定%宽度

小提琴

 <ul id="nav"> <li><a href="#">HOME</a></li> <li><a href="#">ABOUT</a></li> <li><a href="#">BASIC SERVICES</a></li> <li><a href="#">OUR STAFF</a></li> <li><a href="#">CONTACT US</a></li> </ul> 

CSS

 #nav { text-align: justify; min-width: 500px; } #nav:after { content: ''; display: inline-block; width: 100%; } #nav li { display: inline-block; } 

这个真的有用。 此外,您还可以使用媒体查询来轻松closures横向样式 – 例如,如果您想在手机上垂直堆叠它们,则可以使用该function。

HTML

 <ul id="nav"> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> </ul> 

CSS

 ​#nav { display: table; height: 87px; width: 100%; } #nav li { display: table-cell; height: 87px; width: 16.666666667%; /* (100 / numItems)% */ line-height: 87px; text-align: center; background: #ddd; border-right: 1px solid #fff; white-space: nowrap; }​ @media (max-width: 767px) { #nav li { display: block; width: 100%; } }  ​#nav { display: table; height: 87px; width: 100%; } #nav li { display: table-cell; height: 87px; width: 16.666666667%; /* (100 / numItems)% */ line-height: 87px; text-align: center; background: #ddd; border-right: 1px solid #fff; white-space: nowrap; }​ @media (max-width: 767px) { #nav li { display: block; width: 100%; } } 

http://jsfiddle.net/timshutes/eCPSh/416/

如果可以,请使用flexbox:

 <ul> <li>HOME</li> <li>ABOUT US</li> <li>SERVICES</li> <li>PREVIOUS PROJECTS</li> <li>TESTIMONIALS</li> <li>NEWS</li> <li>RESEARCH &amp; DEV</li> <li>CONTACT</li> </ul> ul { display: flex; justify-content:space-between; list-style-type: none; } 

jsfiddle: http : //jsfiddle.net/RAaJ8/

浏览器支持实际上是相当不错的(前缀其他讨厌的东西): http : //caniuse.com/flexbox

理想的解决scheme是:

  1. 自动缩放到导航容器的宽度
  2. 支持dynamic数量的菜单项。

nav容器中使用一个简单的ul菜单,我们可以构build一个满足上述要求的解决scheme。

HTML

 <nav> <ul> <li>Home</li> <li>About</li> <li>Basic Services</li> <li>Specialty Services</li> <li>Our Staff</li> <li>Contact Us</li> </ul> </nav> 

首先,我们需要强制ul具有其nav容器的全部宽度。 为了做到这一点,我们将使用width: 100%伪元素。

这完美地实现了我们的目标,但是添加了来自伪元素的尾随空白。 我们可以通过IE8将所有浏览器的空白字符设置为0,并将其设置为100%。 请参阅下面的示例CodePen和解决scheme:

CSS

 nav { width: 900px; } nav ul { text-align: justify; line-height: 0; margin: 0; padding: 0; } nav ul:after { content: ''; display: inline-block; width: 100%; } nav ul li { display: inline-block; line-height: 100%; } 

这应该为你做。

 <div id="nav-wrap"> <ul id="nav"> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> </ul> </div> #nav-wrap { float: left; height: 87px; width: 900px; } #nav { display: inline; height: 87px; width: 100%; } .nav-item { float: left; height: 87px; line-height: 87px; text-align: center; text-decoration: none; width: 150px; } 

我尝试了以上所有,发现他们想要。 这是我能find的最简单最灵活的解决scheme(感谢上述所有灵感)。

HTML

 <div id="container"> <ul> <li>HOME</li> <li>ABOUT US</li> <li>SERVICES</li> <li>PREVIOUS PROJECTS</li> <li>TESTIMONIALS</li> <li>NEWS</li> <li>RESEARCH &amp; DEV</li> <li>CONTACT</li> </ul> </div> 

CSS

 div#container{ width:900px; background-color:#eee; padding:20px; } ul { display:table; width: 100%; margin:0 0; -webkit-padding-start:0px; /* reset chrome default */ } ul li { display:table-cell; height:30px; line-height:30px; font-size:12px; padding:20px 10px; text-align: center; background-color:#999; border-right:2px solid #fff; } ul li:first-child { border-radius:10px 0 0 10px; } ul li:last-child { border-radius:0 10px 10px 0; border-right:0 none; } 

显然,你可以放弃第一个/最后一个孩子的四舍五入的结果,但我认为他们是真正的purdy(你的客户也是如此);

容器的宽度限制了水平列表,但是如果你喜欢的话,你可以把这个值填入绝对值。

摆弄它,如果你喜欢..

http://jsfiddle.net/tobyworth/esehY/1/

你有没有尝试将li的宽度设置为16%,余量为0.5%?

 nav li { line-height: 87px; float: left; text-align: center; width: 16%; margin-right: 0.5%; } 

编辑:我会将UL设置为100%宽度:

nav ul {width:100%; 保证金:0汽车; }

这是CSS flexbox模型将会解决的问题,因为它可以让你指定每个li将会得到相同比例的剩余宽度。

我尝试了很多不同的东西,最后发现最适合我的是简单的在padding-right: 28px;joinpadding-right: 28px;

我玩弄填充以获得适当的数量来均匀地放置物品。

而不是定义宽度,你可以在你的li上放一个margin-left,这样间距是一致的,只要确保margin(s)+ li在900px以内。

 nav li { line-height: 87px; float: left; text-align: center; margin-left: 35px; } 

希望这可以帮助。

 <!DOCTYPE html> <html lang="en"> <head> <style> #container { width: 100%; border: 1px solid black; display: block; text-align: justify; } object, span { display: inline-block; } span { width: 100%; } </style> </head> <div id="container"> <object> <div> alpha </div> </object> <object> <div> beta </div> </object> <object> <div> charlie </div> </object> <object> <div> delta </div> </object> <object> <div> epsilon </div> </object> <object> <div> foxtrot </div> </object> <span></span> </div> </html> 

我不愿意提供这个,因为它误用了老的HTML。 这不是一个好的解决scheme,但它是一个解决scheme:使用一个表。

CSS:

 table.navigation { width: 990px; } table.navigation td { text-align: center; } 

HTML:

 <table cellpadding="0" cellspacing="0" border="0" class="navigation"> <tr> <td>HOME</td> <td>ABOUT</td> <td>BASIC SERVICES</td> <td>SPECIALTY SERVICES</td> <td>OUR STAFF</td> <td>CONTACT US</td> </tr> </table> 

这不是表格被创造出来的,但是直到我们能够更好地执行相同的动作 ,我想这只是可以接受的。