水平列表项 - 适合 100% 且间距均匀

Question

我有一个简单的列表，我试图让列表项水平间隔均匀，但无论容器的宽度如何，仍然填充 100% 的容器宽度。

我不希望每个列表项的宽度相等，而是希望每个列表项之间的间距均匀：

jsfiddle：http://jsfiddle.net/b6muX/1/

此外，列表项的数量可能是动态的，与我的示例中的数量不同。

这个不用js也可以吗？

这是我的标记和 css：

<ul>
    <li>This is menu item 1</li>
    <li>Number 2</li>
    <li>Item Number 3</li>
    <li>Menu 4</li>
</ul>

还有下面的css：

ul {
    width: 100%;
    background: #cacaca;
    margin: 0;
    padding: 0;
}
li {
    list-style-type: none;
    display: inline-block;
    padding-right: 10%;
    width: auto;
    margin-right: 0.5%;
    background: #fafafa;
    padding-left: 0;
    margin-left: 0;
}
li:last-child {
    margin-right: 0;
    padding-right: 0;
}

Answer 1

新的 CSS flexbox 规范将解决您的问题 :)

ul {
    display: flex;
    align-items: stretch; /* Default */
    justify-content: space-between;
    width: 100%;
    background: #cacaca;
    margin: 0;
    padding: 0;
}
li {
    display: block;
    flex: 0 1 auto; /* Default */
    list-style-type: none;
    background: #fafafa;
}

<ul>
    <li>This is menu item 1</li>
    <li>Number 2</li>
    <li>Item Number 3</li>
    <li>Menu 4</li>
</ul>

另请参阅：http://jsfiddle.net/teddyrised/b6muX/3/

请允许我稍微解释一下：

1. 父级上的display: flex 告诉父级采用 CSS flexbox 模型
2. align-items: stretch 告诉父级它的子级应该伸展到行的全高。这是属性的默认值。
3. justify-content: space-between 是这里的魔法 - 它指示父级在布置子级后分配剩余空间。

关于孩子：

1. 孩子们的flex: 0 1 auto 告诉他们：
   • flex-grow: 0：不要长，否则会填满父母
   • flex-shrink: 1：必要时收缩，防止溢出（你可以通过设置为0来关闭它。
   • flex-basis: auto：子元素的宽度是根据其内容自动计算的。如果您想要固定的等宽子元素，只需将其设置为 100%。

您可以在看到时将填充调整为<li> 元素。

---

旧 CSS 方法：text-align: justify

旧方法虽然运行良好，但有点麻烦，因为它需要您重置无序列表元素中的字体大小以消除子元素之间的间距。它还要求您渲染一个伪元素，以确保内容溢出第一行以进行文本对齐（请记住，对齐文本的默认行为是非 100% 的行将不被对齐）。

ul {
    font-size: 0; /* Eliminate spacing between inline block elements */
    text-align: justify;
    width: 100%;
    background: #cacaca;
    list-style: none;
    margin: 0;
    padding: 0;
}
ul:after {
    content: 'abc';
    display: inline-block;
    width: 100%;
    height: 0;
}
li {
    display: inline-block;
    background: #fafafa;
    font-size: 1rem; /* Reuse root element's font size */
}
p {
    font-size: 1rem;
}

<ul>
    <li>This is menu item 1</li>
    <li>Number 2</li>
    <li>Item Number 3</li>
    <li>Menu 4</li>
</ul>

另见：http://jsfiddle.net/teddyrised/b6muX/5/