水平列表项 - 适合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规范将是您问题的解决方案:)

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

如果你允许我沉迷于一些解释：

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

关于孩子们：

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

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

---

旧CSS方法：text-align: justify

旧方法虽然工作得很好，但有点麻烦，因为它要求您重置无序列表元素中的字体大小以消除子元素之间的间距。它还要求您呈现一个伪元素，以确保内容溢出第一行以启动文本对齐（请记住，对齐文本的默认行为是不合理的行不合理）。 / p>

＆＃13;
＆＃13;
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;
}
＆＃13;
<ul>
    <li>This is menu item 1</li>
    <li>Number 2</li>
    <li>Item Number 3</li>
    <li>Menu 4</li>
</ul>
＆＃13;
＆＃13;
＆＃13;

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