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

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

现代方法 - CSS3 Flexboxes

现在我们有了 CSS3 flexboxes，您不再需要求助于技巧和解决方法，以便使这项工作有效。幸运的是，浏览器支持已经取得了长足的进步，我们大多数人都可以开始使用 Flexbox。

只需将父元素的 display 设置为 flex，然后更改 justify-content 属性 到 空格 或 空格< /code>以便在子 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>

---

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

你需要使用一个“技巧”来完成这项工作。

参见： 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 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%;
}

Answer 5

这可能适合您的需求：

#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/

Answer 6

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/

Answer 7

您需要有

;元素分开，否则对齐将不起作用。

For example, this:

<ul><li>test</li><li>test</li></ul>


needs to be like this:
<ul>
<li>test</li>
<li>test</li>
</ul>

或者至少在打开和关闭之间具有空间

。标签。

Answer 8

此博客具有令人满意的稳健性解决方案。不过，它需要一些细微的更改才能适应 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;
}

http:// jsfiddle.net/mblase75/9vNBs/

Answer 9

如果标记的答案中有空格，则该答案不起作用。

这里的最佳答案适用于空格
我如何*真正*证明 HTML 中的水平菜单合理+CSS？

Answer 10

使用 CSS Flexbox

#Navigation {
  width: 100%;
  padding: 0;
  margin: .5rem 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  list-style-type: none;
  color: #ffffff;
}