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

Horizontal list items - fit to 100% with even spacing

提问by Marty Wallace

I have a simple list and i am trying to get the list items to be evenly spaced horizontally, but still fill 100% of the width of the container regardless of the width of the container.

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

I do not want each list item to be of equal width, but instead the spacing between each list item to be even:

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

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

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

Also the number of list items might be dynamic and not the same as the number in my example.

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

Can this be done without js?

这可以在没有js的情况下完成吗？

Here is my markup and css:

这是我的标记和 css：

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

and the following css:

和以下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;
}

回答by Terry

The new CSS flexbox specification would be the solution to your problem :)

新的 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>

See also: http://jsfiddle.net/teddyrised/b6muX/3/

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

If you would allow me to indulge myself in a bit of explanation:

如果你允许我放纵一下自己的解释：

1. display: flexon the parent tells the parent to adopt the CSS flexbox model
2. align-items: stretchtells the parent that its children should stretch to the full height of the row. This is the default value of the property.
3. justify-content: space-betweenis the magichere — it instructs the parent to distribute remaining space left after laying out the children between them.

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

On the children:

关于孩子：

1. flex: 0 1 autoon the children tells them that:
   • flex-grow: 0: Do no grow, otherwise they will fill up the parent
   • flex-shrink: 1: Shrink when necessary, to prevent overflowing (you can turn this off by setting to 0.
   • flex-basis: auto: Widths of children element are calculated automatically based on their content. If you want fixed, equal width children element, simply set it to 100%.

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

You can adjust the padding to the <li>element as of when you see please.

您可以<li>在看到时调整元素的内边距。

---

---

Old CSS method: text-align: justify

旧的 CSS 方法： text-align: justify

The old method, while working perfectly, is a little more cumbersome as it requires you to reset the font-size in the unordered list element to eliminate spacing between child elements. It also requires you to render an pseudo-element to ensure that the content overflows the first row for text justification to kick in (remember that the default behavior of justified text is that a row that is not 100% will not be justified).

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

See also: http://jsfiddle.net/teddyrised/b6muX/5/

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