उल चौड़ाई संपत्ति को कैसे समायोजित करें?

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> 

सीएसएस:

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

यह छवियों का एक क्षैतिज सरणी है। list.items.count भिन्न हो सकता है।
सभी छवियों को फिट करने के लिए चौड़ाई वाली संपत्ति क्या होनी चाहिए।
मैंने कोशिश की - ऑटो - और अपेक्षित आकार बदलने योग्य चौड़ाई - लेकिन ऐसा नहीं है।

Answer 1

li तत्वों inline-block रों करें और nowrap को ul की white-space गुण सेट।

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

Answer 2

jquery आज़माएं, इसलिए सीएसएस फ़ाइल में आप 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

Answer 5

तुम बस उल तत्व को चौड़ाई संपत्ति डाल दिया।