jquery - 使用 CSS 或 JQuery 动态调整 CSS 边距/填充以填充父容器

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>