水平列表项-均匀间距适合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;
}

- Marty Wallace

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/

- Terry

---

@MartyWallace 真不幸 — IE仅支持IE10及以上版本的flexbox。在此之下，您要么可以使用jQuery实现完美的防弹解决方案，要么可以使用混乱的CSS（例如将列表项声明为“inline-block”，并在父元素上使用“text-align: justify”）。 - Terry

@MartyWallace 请查看更新的答案中IE的可能CSS备选方案。 - Terry

在Windows 10上的IE11中，原始解决方案对我有效，但“旧CSS方法”则无效。在Chrome和Edge中，两种方法都对我有效。 - majestzim

我该如何使这个也有侧边间距？text-align: justify的例子看起来像这样：|a | a | a|。我怎么才能让它看起来像这样：| a | a | a |？ - Parsa Yazdani

使用 justify-content: space-around 并确保 flex 子元素不会增长以占用所有宽度，即使用 flex-grow: 0。 - Terry