css - CSS ul li if remove 1 make others big

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 代码。您还需要关心边框和填充以获得所需的高度。