Html 如何证明水平列表的合理性？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6879467/
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 do I justify a horizontal list?
提问by Maxpm
I have a horizontal navbar like the following:
我有一个如下所示的水平导航栏：
<ul id = "Navigation">
<li><a href = "About.html">About</a></li>
<li><a href = "Contact.html">Contact</a></li>
<!-- ... -->
</ul>
I use CSS to remove the bullet points and make it horizontal.
我使用 CSS 删除项目符号并使其水平。
#Navigation li
{
list-style-type: none;
display: inline;
}
I'm trying to justify the text so each link is spread out evenly to fill up the entirety of the ul's space. I tried adding text: justifyto both the liand ulselectors, but they're still left-aligned.
我试图证明文本的合理性，以便每个链接均匀分布以填满整个ul空间。我尝试添加text: justify到li和ul选择器，但它们仍然是左对齐的。
#Navigation
{
text-align: justify;
}
#Navigation li
{
list-style-type: none;
display: inline;
text-align: justify;
}
This is strange, because if I use text-align: right, it behaves as expected.
这很奇怪，因为如果我使用text-align: right，它会按预期运行。
How do I spread out the links evenly?
如何均匀分布链接？
采纳答案by Josh Crozier
Modern Approach - CSS3 Flexboxes
现代方法 - CSS3 Flexboxes
Now that we have CSS3 flexboxes, you no longer need to resort to tricks and workarounds in order to make this work. Fortunately, browser support has come a long way, and most of us can start using flexboxes.
现在我们有了CSS3 flexboxes，你不再需要求助于技巧和变通方法来完成这项工作。幸运的是，浏览器支持已经取得了长足的进步，我们大多数人都可以开始使用 flexbox。
Just set the parent element's displayto flexand then change the justify-contentpropertyto either space-betweenor space-aroundin order to add space between/around the children flexbox items. Then add additional vendor prefixes for more browser support.
只需将父元素设置display为flex，然后将justify-content属性更改为space-between或space-around以在子 flexbox 项目之间/周围添加空间。然后添加额外的供应商前缀以获得更多浏览器支持。
Using justify-content: space-between- (example here):
使用justify-content: space-between- （这里的例子）：
ul {
list-style: none;
padding: 0;
margin: 0;
}
.menu {
display: flex;
justify-content: space-between;
}<ul class="menu">
<li>About</li>
<li>Contact</li>
<li>Contact Longer Link</li>
<li>Contact</li>
</ul>Using justify-content: space-around- (example here):
使用justify-content: space-around- （这里的例子）：
ul {
list-style: none;
padding: 0;
margin: 0;
}
.menu {
display: flex;
justify-content: space-around;
}<ul class="menu">
<li>About</li>
<li>Contact</li>
<li>Contact Longer Link</li>
<li>Contact</li>
</ul>回答by thirtydot
You need to use a "trick" to make this work.
您需要使用“技巧”来完成这项工作。
See:http://jsfiddle.net/2kRJv/
见：http : //jsfiddle.net/2kRJv/
HTML:
HTML：
<ul id="Navigation">
<li><a href="About.html">About</a></li>
<li><a href="Contact.html">Contact</a></li>
<!-- ... -->
<li class="stretch"></li>
</ul>
CSS:
CSS：
#Navigation
{
list-style-type: none;
text-align: justify;
height: 21px;
background: #ccc
}
#Navigation li
{
display: inline
}
#Navigation .stretch {
display: inline-block;
width: 100%;
/* if you need IE6/7 support */
*display: inline;
zoom: 1
}
Details on IE6/7 trickery: Inline block doesn't work in internet explorer 7, 6
IE6/7 技巧的详细信息：内联块在 Internet Explorer 7、6 中不起作用
回答by Ben Foster
This can also be achieved using a pseudo element on the ulelement:
这也可以使用元素上的伪元素来实现ul：
ul {
margin: 0;
padding: 0;
list-style-type: none;
text-align: justify;
}
ul:after {
content: "";
width: 100%;
display: inline-block;
}
li {
display: inline;
}
回答by jakosik
Just do:
做就是了：
ul { width:100%; }
ul li {
display:table-cell;
width:1%;
}
回答by Sparkup
This might suit your needs:
这可能适合您的需求：
#Navigation{
}
#Navigation li{
list-style-type: none;
text-align: center;
float: left;
width: 50%; /*if 2 <li> elements, 25% if 4...*/
}
回答by Mark
HTML
HTML
<ul id="Navigation">
<li><a href="#">The Missing Link</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Riluri</a></li>
<li><a href="#">Contact us</a></li>
<!-- ... -->
<li class="stretch"></li>
</ul>
CSS
CSS
#Navigation {
list-style-type: none;
text-align: justify;
height: 21px;
background: #ccc
}
#Navigation li{
display: inline
}
#Navigation li a {
text-align: left;
display:inline-block;
}
#Navigation .stretch {
display: inline-block;
width: 100%;
/* if you need IE6/7 support */
*display: inline;
zoom: 1
}
View demo: http://jsfiddle.net/2kRJv/392/
回答by Adrian Cumpanasu
You need to have the <li> elements separated, otherwise the justify won't work.
您需要将 <li> 元素分开，否则 justify 将不起作用。
For example, this:
<ul><li>test</li><li>test</li></ul>
needs to be like this:
<ul>
<li>test</li>
<li>test</li>
</ul>
or at least have spaces between the opening and closing <li> tags.
或者至少在开始和结束 <li> 标签之间有空格。
回答by Blazemonger
This bloghas a satisfyingly robust solution. It needs some slight changes to accommodate a ul/linavigation, though:
这个博客有一个令人满意的强大解决方案。不过，它需要一些细微的变化来适应ul/li导航：
#Navigation {
width: 100%;
padding: 0;
text-align: justify;
font-size: 0;
font-size: 12px; /* IE 6-9 */
}
#Navigation>li {
font-size: 12px;
text-align: center;
display: inline-block;
zoom: 1;
*display: inline; /* IE only */
}
#Navigation:after {
content:"";
width: 100%;
display: inline-block;
zoom: 1;
*display: inline;
}
回答by artemdev
The marked answer does not work if has a white space in it.
如果其中有空格，则标记的答案不起作用。
The top answer here works with white spaces How do I *really* justify a horizontal menu in HTML+CSS?
此处的最佳答案适用于空格 我如何*真正* 证明 HTML+CSS 中的水平菜单合理？
