HTML: 列表等宽

1 min read Aug 16, 2015

HTML: 列表等宽

Table of Content

虽然我们可以用 width 设置百分比甚至固定值的方式使列表项等宽, 但对于未知数量的列表, 可能需要更好的方式来实现。

table-cell

第一种也是最简单的方法: display: table-cell

除了简单之外, 兼容性也较好。

box-flex

box-flex 属性是 CSS 3 的新内容, 可以依据父元素的宽度分配子元素, 类似数学中的分数一样。

假设: 我们有一个容器, 宽度是 1200px, 其中包含三个子元素。

如果三个子元素的 box-flex 属性均为 1, 则每个元素会获得 400px 的宽度。

如果其中一个元素的 box-flex 属性为 2, 其余的元素为 1, 那么该元素将有 600px 的宽度, 其余元素有 300px 的宽度。

这么说起来, box-flex 还是蛮好用的, 可惜的是目前兼容性不算好, 不过这么强大的属性还是了解一下比较好。

JavaScript

最后一种方法就是用 JavaScript 实现, 从兼容性角度来说是最好的, 当然, 会比较麻烦。

Picsew | Ezra