Html 如何在指定的容器中均匀且完全地拉伸固定数量的水平导航项
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5060923/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to stretch a fixed number of horizontal navigation items evenly and fully across a specified container
提问by timshutes
I'd like to stretch 6 nav items evenly across a 900px container, with an even amount of white space between. For instance...
我想在一个 900 像素的容器上均匀地拉伸 6 个导航项目，它们之间有均匀的空白空间。例如...
---| 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;
}
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".
这个问题有两个方面。首先，它并没有真正证明它是合理的，而是将 li 标签均匀地分布在整个 ul 标签中。 .
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.
第二个问题是，如果导航项目大于 150 像素，则布局会中断，即 SPECIALTY SERVICES - 即使整个导航有足够的空间。
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...
谁能帮我解决这个问题？我一直在网上搜索解决方案，但它们似乎都不够用。仅在可能的情况下使用 CSS/HTML...
Thanks!
谢谢！
UPDATE (7/29/13): Using table-cell is the best modern way to implement this layout. See felix's answer below. The table cellproperty works on 94% of browserscurrently. You'll have to do something about IE7 and below, but otherwise should be ok.
更新 (7/29/13)：使用表格单元格是实现此布局的最佳现代方式。请参阅下面 felix 的回答。该table cell属性目前适用于 94% 的浏览器。您必须对 IE7 及以下版本进行处理，否则应该没问题。
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.
更新（2013 年 7 月 30 日）：不幸的是，如果您将此布局与媒体查询相结合，则会有一个 webkit 错误会影响这一点。现在，您必须避免更改“显示”属性。 请参阅 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.
更新 (7/25/14)：下面有一个更好的解决方案，现在涉及 text-align: justify。使用它更简单，您将避免 Webkit 错误。
回答by Danield
Use text-align:justifyon 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
text-align:justify在容器上使用，这样无论您的列表中有多少个元素，它都会起作用（您不必为每个列表项计算 % 宽度
#nav {
text-align: justify;
min-width: 500px;
}
#nav:after {
content: '';
display: inline-block;
width: 100%;
}
#nav li {
display: inline-block;
}<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>回答by Chris Sattinger
This one really works. Also has the benefit that you can use media queries to easily turn off the horizontal style — for instance if you want to stack them vertically when on mobile phone.
这个真的有效。还有一个好处是你可以使用媒体查询轻松关闭水平样式——例如，如果你想在手机上垂直堆叠它们。
HTML
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
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%;
}
}
回答by trias
if you can, use flexbox:
如果可以，请使用 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/
jsfiddle：http: //jsfiddle.net/RAaJ8/
Browser support is actually quite good (with prefixes an other nasty stuff): http://caniuse.com/flexbox
浏览器支持实际上非常好（带有其他讨厌的前缀）：http: //caniuse.com/flexbox
回答by Anthony DiSanti
An ideal solution will:
理想的解决方案将：
- Automatically scale to the width of the navigation container
- Support a dynamic number of menu items.
- 自动缩放到导航容器的宽度
- 支持动态数量的菜单项。
Using a simple ulmenu inside of an navcontainer, we can build a solution that meets the above requirements.
使用容器ul内的简单菜单nav，我们可以构建满足上述要求的解决方案。
HTML
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>
First, we need to force the ulto have the full width of its navcontainer. To accomplish this, we will use the :afterpsuedo-element with width: 100%.
首先，我们需要强制ul具有其nav容器的全宽。为了实现这一点，我们将使用:after带有width: 100%.
This achieves our goal perfectly, but adds trailing whitespace from the psuedo-element. We can remove this whitespace across all browsers through IE8 by setting the line-heightof the ulto 0 and setting it back to 100% on its lichildren. See the example CodePenand solution below:
这完美地实现了我们的目标，但添加了伪元素的尾随空格。我们可以通过设置通过IE8删除所有浏览器这种空白line-height的ul为0，并设置回100％它的li孩子。请参阅下面的示例CodePen和解决方案：
CSS
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%;
}
回答by Astravagrant
I tried all the above and found them wanting. This is the simplest most flexible solution I could figure out (thanks to all of the above for inspiration).
我尝试了以上所有方法，发现他们想要。这是我能想到的最简单、最灵活的解决方案（感谢以上所有人的启发）。
HTML
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
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;
}
You can drop the first/last child-rounded ends, obviously, but I think they're real purdy (and so does your client ;)
显然，您可以放弃第一个/最后一个儿童圆形末端，但我认为它们是真正的 purdy（您的客户也是如此；）
The container width limits the horizontal list, but you can ditch this and just apply an absolute value to the UL if you like.
容器宽度限制了水平列表，但是如果您愿意，您可以放弃它并仅将绝对值应用于 UL。
Fiddle with it, if you like..
摆弄它，如果你喜欢..
回答by Brian
This should do it for you.
这应该为你做。
<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;
}
回答by Jen
I tried so many different things and finally found what worked best for me was simply adding in
padding-right: 28px;
我尝试了很多不同的东西，最后发现最适合我的只是添加
padding-right: 28px;
I played around with the padding to get the right amount to evenly space the items.
我使用了填充来获得正确的数量来均匀地间隔物品。
回答by BJ Safdie
Have you tried setting the li width to, say, 16% with a margin of 0.5%?
您是否尝试将 li 宽度设置为 16%，边距为 0.5%？
nav li {
line-height: 87px;
float: left;
text-align: center;
width: 16%;
margin-right: 0.5%;
}
edit: I would set the UL to 100% width:
编辑：我会将 UL 设置为 100% 宽度：
nav ul { width: 100%; margin: 0 auto; }
导航 { 宽度：100%; 边距：0 自动；}
回答by Neil
This is the sort of thing that the CSS flexbox model will fix, because it will let you specify that each li will receive an equal proportion of the remaining width.
这是 CSS flexbox 模型将修复的那种事情，因为它可以让您指定每个 li 将获得相同比例的剩余宽度。
回答by TNC
Instead of defining the width, you could just put a margin-left on your li, so that the spacing is consistent, and just make sure the margin(s)+li fit within 900px.
您可以不定义宽度，而是在 li 上放置一个 margin-left，以便间距一致，并确保 margin(s)+li 适合 900px 以内。
nav li {
line-height: 87px;
float: left;
text-align: center;
margin-left: 35px;
}
Hope this helps.
希望这可以帮助。
