如何在指定容器中均匀且完整地拉伸固定数量的水平导航项目
我希望在一个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%; } }
如果可以，请使用flexbox：
<ul> <li>HOME</li> <li>ABOUT US</li> <li>SERVICES</li> <li>PREVIOUS PROJECTS</li> <li>TESTIMONIALS</li> <li>NEWS</li> <li>RESEARCH & 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是：
- 自动缩放到导航容器的宽度
- 支持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 & 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（你的客户也是如此）;
容器的宽度限制了水平列表，但是如果你喜欢的话，你可以把这个值填入绝对值。
摆弄它，如果你喜欢..
你有没有尝试将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>
这不是表格被创造出来的，但是直到我们能够更好地执行相同的动作 ，我想这只是可以接受的。
