CSS ul li如果删除1使其他人变大

Question

ul的高度为500px。如何使li高度动态变为li的数量？例如，如果我有5 li，那么高度将是20％，如果是4 li，那么它将变为25％。

这是我尝试过的，但如果我从“开发者模式”中删除一个元素，则高度不会改变。

ul{
    list-style:none;
    height:500px;
    width:100%;
    overflow:hidden;
}
li{
    width:100px;
    height:25%;
    background:red;
    border:1px solid black;
}

http://jsfiddle.net/crcb8/

Answer 1

您必须使用JavaScript或依赖灵活的盒子模型（flexbox），所有浏览器都不支持：

ul {
    display: -webkit-flex;
    display: flex;

    -webkit-flex-flow: column;
    flex-flow: column;

    list-style: none;
    height: 500px;
    width: 100%;
}

li {
    width:100px;
    height:25%;
    background:red;
    border:1px solid black;

    -webkit-flex: 1;
    flex: 1;
}

演示：http://jsfiddle.net/crcb8/4/

Answer 2

一个小jquery将为您提供所需，并得到大多数浏览器和移动设备的支持

$(document).ready(function () {
     var x = $('li').siblings().length;
     var y = 100/x;
     $('li').css('height', y + '%');
});

Answer 3

正如搅拌机所说，这与css不可能交叉浏览（？）。

最好的解决方案是一小部分javascript代码可以为你计算高度，例如这个演示

var boxes = document.querySelectorAll('#box li'), // Get the boxes
    size  = 100 / boxes.length; // Calculate the percentage 
for( var i = 0; i < boxes.length; i++ ) {
    boxes[i].style.height = size + '%'; // Set the height
}

演示：http://jsfiddle.net/crcb8/6/

Answer 4

不知道CSS。但也许这个jQuery代码对你有用：

jsfiddle.net/crcb8/8 /

注意这是我制作的第一个jQuery代码。您还需要注意边框和填充以获得所需的高度。