ul widthプロパティの調整方法は？

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はさまざまです。
すべての画像に合わせるには、どのような幅プロパティが必要ですか？
私は - autoと予想される幅変更を試しましたが、そうではありません。

Answer 1

がli要素inline-block Sを作成し、nowrapにulのwhite-spaceプロパティを設定してください。

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

Answer 2

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 3

私はこれらがあなたのために働くだろうと思いますこれらの変更...

#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 4

画像に指定したサイズを保持する必要がある場合は、ページに水平スクロールバーがあることがわかります。あなたは、これが動作することを希望する場合

#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あなただけのul要素にwidthプロパティを置く

Answer 5

。