CSS uli如果刪除1使其他人更大

我的ul的高度爲500px。我怎樣才能讓li高度動態到li有多少？例如，如果我有5 li，那麼高度將是20％，如果是4 li，那麼它會變爲25％。CSS uli如果刪除1使其他人更大

這是我嘗試的，但如果我從「開發人員模式」中刪除一個元素，高度不會改變。

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/

enter image description here

來源

2013-07-31 olo

我不認爲CSS可以做到這一點，你可能必須使用JavaScript – Sourabh

小jQuery將得到你所需要的，是由大多數瀏覽器和移動設備

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

來源

2013-07-31 21:42:14 feitla

你要麼必須使用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/

來源

2013-07-31 21:40:53 Blender

它是如此的恥辱，瀏覽器支持是不好的，因爲它太酷了。 – iConnor

由於攪拌機表示支持，這不是browserly交叉（？）可以使用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/

來源

2013-07-31 21:47:44 iConnor

不知道有關CSS。但也許這jQuery代碼將會對您有用：

jsfiddle.net/crcb8/8/

注意，這是我的第一個jQuery代碼我做了。你也需要關心邊框和填充以獲得所需的高度。

來源

2013-07-31 21:59:25 zgnilec

CSS uli如果刪除1使其他人更大

回答

相關問題