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;） - 请在{更多地了解它{3}}

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

2 个答案: