我有一个简单的列表,我试图让列表项水平均匀分布,但仍然填充容器宽度的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;
}
解决方法
新的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/
如果你允许我沉迷于一些解释：
> display：父对象的flex告诉父对象采用CSS flexBox模型
> align-items：stretch告诉父项它的子项应该伸展到行的整个高度.这是属性的默认值.
> justify-content：space-between是这里的魔力 – 它指示父母在他们之间布置孩子之后分配剩余的空间.
关于孩子们：
> flex：0 1儿童自动告诉他们：
> flex-grow：0：不生长,否则会填满父母
> flex-shrink：1：必要时收缩,以防止溢出(您可以通过设置为0来关闭它.
> flex-basis：auto：子元素的宽度根据其内容自动计算.如果您想要固定的等宽子元素,只需将其设置为100％即可.
您可以将填充调整为< li>当你看到时,元素.
旧CSS方法：text-align：justify
旧方法虽然工作得很好,但有点麻烦,因为它要求您重置无序列表元素中的字体大小以消除子元素之间的间距.它还要求您呈现一个伪元素,以确保内容溢出第一行以启动文本对齐(请记住,对齐文本的默认行为是不合理的行不合理).
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>
