没有使用位置的100％高<li>元素：绝对技巧？</li>

Question

我想要一个简单的HTML布局，内联多个<li>元素，每个元素都有一个height:100%

我使用了以下CSS技巧来实现这一目标：

position:absolute;
top:0;
bottom:0;

See my JSFiddle for an example.

出于这个问题范围之外的原因，我希望绝对没有定位<li>个元素。有人可以了解如何使用position:relative;或position:static; <li>元素实现相同的布局吗？

Answer 1

试试这个jsFiddle example。

<li>元素向左浮动，并使用display:inline-block规则获得正确的高度和宽度。浮动也消除了对规则的需要; li.one { left:0; } li.two { left:33%; } li.three { left:66%; }

html, body {
    height:100%;
    margin:0;
    padding:0;
}
ul {
    /* width:100%; */
    /* height:500px; */
    margin:0;
    padding:0;
    list-style:none;
    height:100%;
}
li {
    display:inline-block;
    height:100%;
    background:#333;
    color:white;
    width:33%;
    float:left;
}
li:nth-child(even) {
    background:#666;
}