html - 如何调整 ul 宽度属性？

Question

<ul id='ul01'>
    <li><a href='#'><img src='img01.png' width="700" height="590" /></a></li>
    <li><a href='#'><img src='img02.png' width="700" height="590" /></a></li>
    <li><a href='#'><img src='img03.png' width="700" height="590" /></a></li>
</ul>

CSS：

#ul01{list-style:none;width:??;}
#ul01 li{float:left;}

这是图像的水平阵列。list.items.count 可以变化。
适合所有图像的宽度属性应该是什么。
我尝试了 - 自动 - 并预期可调整宽度 - 但事实并非如此。

Answer 1

制作li元素inline-blocks 并将white-space属性设置ul为nowrap。

li {
    display: inline-block;
}
ul {
    white-space: nowrap;
}

Answer 2

做出这些改变，我认为这些对你有用......

#ul01{list-style:none;width:100%;}
#ul01 li{float:left; width:33%; }
#ul01 li a { display:block; }
#ul01 li a img { width:100%; height:auto; }

<ul id='ul01'>
    <li><a href='#'><img src='img01.png' /></a></li>
    <li><a href='#'><img src='img02.png' /></a></li>
    <li><a href='#'><img src='img03.png' /></a></li>
</ul>

Answer 3

如果您的图像必须保留您指定的大小，则知道您的页面将具有水平滚动条。如果您愿意，这将起作用

#ul01{list-style:none;width:2100px;}
#ul01 li{float:left; width:700px}

ul宽度必须是(width X 3) + (2 X image-border-if-any} + padding=2100px + n

Answer 4

试试jquery，所以在css文件中你可以放0，值会在以后改变。

<script type="text/javascript">
  $(document).ready(function () {
    var sum = 0;
    $('#ul01 li img').each(function() {
      sum += parseInt($(this).attr("width"), 10);
    });
    $('#ul01').css({ 'width': sum+'px' });
  });
</script>

Answer 5

您只需将 width 属性放入 ul 元素。