html根据内容自动分布,html – 水平列表项 – 适用于100％,间距均匀

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

}

• This is menu item 1
• Number 2
• Item Number 3
• Menu 4

如果你允许我沉迷于一些解释：

> 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;

}

• This is menu item 1
• Number 2
• Item Number 3
• Menu 4