使用CSS均匀分布子元素的高度

Question

假设您需要向用户显示颜色列表.颜色必须显示在具有固定高度的列表中,每种颜色占据该高度的相等部分.

以下是四种颜色的样子,列表高度为90像素,边框周围有厚边框:

上面的图像在以下来源的Firefox 3.6.13中呈现:

<ul style="height: 90px; border: 5px solid black; padding: 0;">
    <li style="height: 25%; background: red;">
    <li style="height: 25%; background: blue;">
    <li style="height: 25%; background: yellow;">
    <li style="height: 25%; background: green;">
</ul>

这一切都很好.该列表确实是90像素高度 - 在边界内 - 并且每种颜色获得(看似)该空间的相等份额.现在,让我们在Safari或Chrome中呈现相同的HTML/CSS:

注意绿色行和边框之间的窄白行.对于我们在这里看到的内容,有一个非常简单的解释:0.25 × 90 = 22.5

Safari和Chrome中的WebKit并不真正喜欢非整数像素高度并且会丢弃小数.有四行高度22,我们在列表底部得到2个像素:90 - 4 × 22 = 2

在静态HTML文件的上下文中,我们可以轻松地将元素的高度分别设置为23,22,23,23像素,并且列表在任何浏览器中都会显示正常.另一方面,如果从数据库加载颜色并且计数随每个请求而变化,则需要更灵活的解决方案.

我知道如何通过onload使用Javascript 计算和设置每行的整数值高度来解决这个问题,如果没有其他任何显示,我将发布此解决方案.但是,我会更喜欢纯粹的基于CSS的解决方案.你能想到一个吗？

Answer 1

尝试删除<li>标签之间的所有结束行。对于前。

<ul><li></li><li></li></ul>

有时这是一个问题，但在你的情况下，我不确定这会有帮助；）试试吧；）