<li>具有适应宽度的元素

Question

我想知道是否可以在CSS中执行此操作,而无需使用javascript:

N个<li>项目的列表,显示内联,相等宽度,以及所有宽度等于容器的宽度

我可以有3个<li>项目,在这种情况下<li>宽度将是33%,或者我可以有4个<li>项目,那么li宽度将是25%.

Answer 1

使用 CSS3 flex box是可能的，如这个 fiddle中所示（仅适用于 webkit 浏览器）。还有其他浏览器自定义属性可以使其适用于最新版本的 Firefox 和 IE。如果您需要适用于 Opera 或旧版本 IE 的东西，那么有一个名为Flexie的 JavaScript 库可能会起作用。

有关浏览器支持的信息归功于CSS3 灵活框布局 (flexbox) 。

超文本标记语言

<ul>
    <li>one</li>
    <li>two</li>
    <li>three</li>
</ul>

<ul>
    <li>one</li>
    <li>two</li>
    <li>three</li>
    <li>four</li>
</ul>

CSS

ul {
    display:-webkit-box;
    -webkit-box-orient: horizontal;
    -webkit-box-pack:justify;
    width:200px;
}

li {
    -webkit-box-flex:1;
    border:1px dashed grey;
    text-align:center;
}