水平列表项 - 适合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/