我如何证明水平列表的合理性？

Question

我有一个水平导航栏,如下所示:

<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;
}

我试图证明文本的合理性,以便每个链接均匀分布以填满整个ul空间.我尝试添加text: justify到选择器li和ul选择器,但它们仍然是左对齐的.

#Navigation
{
    text-align: justify;
}

#Navigation li
{
    list-style-type: none;
    display: inline;
    text-align: justify;
}

这很奇怪,因为如果我使用text-align: right它,它的行为与预期的一样.

如何均匀分布链接？

Answer 1

你需要使用"技巧"来完成这项工作.

见: 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中不起作用

Answer 2

现代方法 - CSS3 Flexboxes

现在我们有了CSS3 flexbox,你不再需要采用技巧和变通方法来实现这一点.幸运的是,浏览器支持已经走过了漫长的道路,我们大多数人都可以开始使用flexbox.

只需将父元素设置display为flex,然后将justify-content属性更改为space-between或者space-around为了在子弹性框项目之间/周围添加空间.然后添加其他供应商前缀以获得更多浏览器支持.

使用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>

使用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>

Answer 3

这也可以使用元素上的伪元素来实现ul:

ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
    text-align: justify;
}

ul:after {
    content: "";
    width: 100%;
    display: inline-block;
}

li {
    display: inline;
}

Answer 4

做就是了：

ul { width:100%; }
ul li {
  display:table-cell;
  width:1%;
}