我如何certificate水平列表？
我有一个水平的导航栏，如下所示：
<ul id = "Navigation"> <li><a href = "About.html">About</a></li> <li><a href = "Contact.html">Contact</a></li> <!-- ... --> </ul> 我使用CSS来删除项目符号并使其水平。
#Navigation li { list-style-type: none; display: inline; }
我试图certificate文本的正确性，所以每个链接都是均匀分布的，以填充整个ul的空间。 我尝试添加text: justify对li和ulselect器，但他们仍然左alignment。
#Navigation { text-align: justify; } #Navigation li { list-style-type: none; display: inline; text-align: justify; }
这很奇怪，因为如果我使用text-align: right ，它的行为如预期。
如何均匀分配链接？
现代方法 – CSS3 Flexboxes
现在我们有了CSS3 flexboxes ，您不再需要使用技巧和解决方法来完成这项工作。 幸运的是， 浏览器的支持已经有了很长的路要走 ，我们大多数人都可以开始使用flexbox。
只需将父元素的display为flex ，然后将justify-content属性更改为space-between或space-around ，以便在子Flexbox项目之间/周围添加空间。 然后添加更多的供应商前缀以获得更多浏览器支持
使用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>
你需要使用“技巧”来完成这项工作。
见： http : //jsfiddle.net/2kRJv/
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：
#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 }
IE6 / 7技巧的详细信息： 内联块在Internet Explorer 7，6中不起作用
这也可以在ul元素上使用伪元素来实现：
ul { margin: 0; padding: 0; list-style-type: none; text-align: justify; } ul:after { content: ""; width: 100%; display: inline-block; } li { display: inline; }
这可能适合您的需求：
#Navigation{ } #Navigation li{ list-style-type: none; text-align: center; float: left; width: 50%; /*if 2 <li> elements, 25% if 4...*/ }
演示 ： http : //jsfiddle.net/KmqzQ/
做就是了：
ul { width:100%; } ul li { display:table-cell; width:1%; }
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
#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 }
查看演示： http : //jsfiddle.net/2kRJv/392/
您需要将<li>元素分开，否则alignment将不起作用。
For example, this: <ul><li>test</li><li>test</li></ul> needs to be like this: <ul> <li>test</li> <li>test</li> </ul>
或者在打开和closures<li>标签之间至less有空格。
这个博客有一个令人满意的强大解决scheme 尽pipe需要稍微改变以适应ul/li导航：
#Navigation { width: 100%; padding: 0; text-align: justify; font-size: 0; font-size: 12px\9; /* 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; }
如果有空格，标记的答案不起作用。
这里的顶部答案与空白工作如何*真的*certificate在HTML + CSS水平菜单？
