8 
<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 は異なる場合があります。
すべての画像に収まる幅のプロパティは何ですか。
私は-自動-サイズ変更可能な幅を期待していましたが、そうではありませんでした。

4

5 に答える 5

13

要素liをinline-blocks にし、 のwhite-spaceプロパティを に設定ulしますnowrap。

li {
    display: inline-block;
}
ul {
    white-space: nowrap;
}
于 2012-07-17T10:23:33.887 に答える
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>
于 2012-07-17T10:13:57.480 に答える
1

画像が指定したサイズを保持する必要がある場合は、ページに水平スクロールバーがあることを知ってください。これが機能することを好む場合

#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

于 2012-07-17T10:24:18.610 に答える
0

ul要素にwidthプロパティを設定するだけです。

于 2013-01-10T23:31:01.370 に答える
0

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>
于 2012-07-17T10:13:25.200 に答える