html – 了解CSS表格单元格和百分比宽度
我正在检查Github如何显示以下菜单:
如果您注意到,每个菜单项的宽度相等.在CSS中,我们应该给它任何百分比值,这背后的原因是什么?注意父div没有给出display:table属性. div { border: 1px solid #000; border-radius: 4px; } div ul { padding: 0; margin: 0; } div ul li { display: table-cell; width: 1%; text-align: center; border-right: 1px solid #000; padding: 10px 0; } div ul li:last-child { border-right: 0; } <div> <ul> <li><a href="#">Commits</a> </li> <li><a href="#">Branch</a> </li> <li><a href="#">Contribution</a> </li> <li><a href="#">anything</a> </li> </ul> </div> 宽度百分比背后的原因是什么? 解决方法
这与
automatic table layout的工作方式有关.尤其是:
在您的情况下,您在每个table-cell元素上设置了一个小的百分比宽度.但是浏览器需要确保表格单元格填满表格的宽度(它本身与其包含的块一样宽),因此它必须扩展单元格以尽可能多地占用表格中的空间. 这导致近似等宽单元的原因是因为所有这些单元的百分比值相等.例如,如果您为其中一个单元格设置稍大的宽度,您将看到它变得更宽,而其他单元格变得更窄以适应: div { border: 1px solid #000; border-radius: 4px; } div ul { padding: 0; margin: 0; } div ul li { display: table-cell; width: 1%; text-align: center; border-right: 1px solid #000; padding: 10px 0; } div ul li:first-child { width: 3%; } div ul li:last-child { border-right: 0; } <div> <ul> <li><a href="#">Commits</a> </li> <li><a href="#">Branch</a> </li> <li><a href="#">Contribution</a> </li> <li><a href="#">anything</a> </li> </ul> </div> 但是,请注意,由于某些单元格的内容比其他单元格长,因此存在细微差别,并且在计算单元格宽度时会考虑此内容的长度. 使用小到1%的值的原因是您可以继续添加单元格,浏览器仍然会尝试尽可能均匀地分配可用宽度.你基本上告诉单元格它们不需要至少一定的宽度,所以你可以添加(虽然从技术上讲,1%仍然是东西). 没有分配元素的事实显示:table是无关紧要的,因为将在表格单元格周围生成匿名表格包装器,以便它们可以正确呈现.这个匿名表包装器的功能与带有display:table的非样式元素完全相同,这意味着表宽度是auto,用于计算百分比单元格宽度. (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |