如何将固定数量的水平导航项目均匀且完全横跨指定的容器 [英] How to stretch a fixed number of horizontal navigation items evenly and fully across a specified container
问题描述
我想在一个900像素的容器上均匀地拉伸6个导航项目，两者之间有一个均匀的白色空间。例如...
I'd like to stretch 6 nav items evenly across a 900px container, with an even amount of white space between. For instance...
---| 900px Container |---
---| HOME ABOUT BASIC SERVICES SPECIALTY SERVICES OUR STAFF CONTACT US |---
目前，找到这样做是以下：
Currently, the best method I can find to do this is the following:
nav ul {
width: 900px;
margin: 0 auto;
}
nav li {
line-height: 87px;
float: left;
text-align: center;
width: 150px;
}
与此相关的PROBLEM是两倍。首先，它没有真正的理由，而是将li标签均匀地分布在整个ul标签。在HOME或ABOUT等较小菜单项和BASIC SERVICES等较大菜单项之间创建不均匀的白色空间， 。
The PROBLEM with this is two fold. First of all, it doesn't truly justify it, but rather spreads the li tags evenly throughout the ul tag.. creating uneven white-space between smaller menu items like "HOME" or "ABOUT" and larger ones like "BASIC SERVICES".
第二个问题是，如果导航项大于150px，布局就会中断，即SPECIALTY SERVICES是 - 即使有足够的空间用于整个导航。
The second problem is that the layout breaks if a nav item is larger than 150px, which SPECIALTY SERVICES is - even though there is more than enough space for the whole nav.
任何人都可以为我解决这个问题？我一直在网上搜索解决方案，他们似乎都出现了短。 CSS / HTML如果可能...
Can anyone solve this for me? I've been scouring the web for solutions, and they all seem to come up short. CSS / HTML only if possible...
谢谢！
更新（7/29/13）使用table-cell是实现此布局的最佳现代方式。见下面的felix的回答。目前，表格单元格属性可在94％的浏览器上使用。你必须做一些关于IE7和以下，但否则应该是确定。
UPDATE (7/29/13): Using table-cell is the best modern way to implement this layout. See felix's answer below. The table cell property works on 94% of browsers currently. You'll have to do something about IE7 and below, but otherwise should be ok.
UPDATE（7/30/13）：不幸的是，有一个webkit错误如果您将此布局与媒体查询结合使用，会对此产生影响。现在你必须避免更改'display'属性。 请参阅Webkit Bug。
UPDATE (7/30/13): Unfortunately, there is a webkit bug that impacts this if you're combining this layout with Media Queries. For now you'll have to avoid changing the 'display' property. See Webkit Bug.
UPDATE（7 / 25/14）：下面有一个更好的解决方案，现在涉及text-align：justify。
使用这个更简单，你可以避免Webkit错误。
UPDATE (7/25/14): There is a better solution to this below now involving text-align: justify. Using this is simpler and you'll avoid the Webkit bug.
推荐答案
使用 text -align：justify 在容器上，这样，无论你的列表中有多少个元素，它都会工作（你不必为每个列表项创建百分比）
Use text-align:justify on the container, this way it will work no matter how many elements you have in your list (you don't have to work out % widths for each list item
FIDDLE
<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>
b $ b
CSS
CSS
#nav {
text-align: justify;
min-width: 500px;
}
#nav:after {
content: '';
display: inline-block;
width: 100%;
}
#nav li {
display: inline-block;
}
这篇关于如何将固定数量的水平导航项目均匀且完全横跨指定的容器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
