Date
Jul. 21st, 2024
 
2024年 6月 16日

Post: HTML: 列表等宽

HTML: 列表等宽

Published 12:08 Aug 16, 2015.

Created by @ezra. Categorized in #Programming, and tagged as #HTML.

Source format: Markdown

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 实现, 从兼容性角度来说是最好的, 当然, 会比较麻烦。

Pinned Message
HOTODOGO
I'm looking for a SOFTWARE PROJECT DIRECTOR / SOFTWARE R&D DIRECTOR position in a fresh and dynamic company. I would like to gain the right experience and extend my skills while working in great teams and big projects.
Feel free to contact me.
For more information, please view online résumé or download PDF
本人正在寻求任职 软件项目经理 / 软件技术经理 岗位的机会, 希望加⼊某个新鲜⽽充满活⼒的公司。
如有意向请随时 与我联系
更多信息请 查阅在线简历下载 PDF