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-block并将white-space的{{1}}属性设置为ul。

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元素。

如何调整ul width属性？

5 个答案: