动态调整CSS保证金/填充使用CSS或JQuery的

Question

填写父容器我不知道这是可能的或没有，但这里大概是我有：

<ul style="width:900px;"> 
    <li>Home</li> 
    <li>Page</li> 
    <li>Page</li> 
    <li>Page</li> 
    <li>Page</li> 
</ul> 

总是有很多空的空间在最后的列表项之后。是否可以自动调整列表项的填充以适应父级？

Answer 1

像这样的东西可能工作（使用jquery为方便起见）：

<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.2.min.js"></script> 
<script> 
    $(document).ready(function() { 

    var total = $("li").size(); 
    // get the browser width 
    var width = $(window).width(); 

    // determine width of each li 
    var liWidth = Math.ceil(width/total); 
    $("li").css('width', liWidth + 'px'); 
}); 
</script> 

Answer 2

也许你可以用display: table-cell;尝试。

请注意，并非所有的浏览器或浏览器版本，与没有父母这些细胞与display: table-row;（和本身与display: table;父）的罚款 - 阅读一些更多关于它在quirksmode。