水平列表项 - 以均匀间距适合 100% [英] Horizontal list items - fit to 100% with even spacing

问题描述

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

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.

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

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/

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

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

可以不用js吗?

这是我的标记和 CSS:

Here is my markup and 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;
}

推荐答案

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

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

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/

如果你允许我解释一下:

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

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

1. display: flex on the parent tells the parent to adopt the CSS flexbox model
2. align-items: stretch tells 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-between is the magic here — it instructs the parent to distribute remaining space left after laying out the children between them.

关于孩子:

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

1. flex: 0 1 auto on 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%.

您可以在看到时调整

元素的内边距.

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

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

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).

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/

这篇关于水平列表项 - 以均匀间距适合 100%的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！