Cómo ajustar la propiedad de ancho 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;} 

Ésta es una serie horizontal de las imágenes. list.items.count puede variar.
¿Cuál debe ser la propiedad de ancho para adaptarse a todas las imágenes.
He intentado con - auto - y ancho resizible esperado - pero no lo es.

Answer 1

Hacer los elementos liinline-block s y establezca la propiedad white-space del ul a nowrap.

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

Answer 2

intente jquery, de modo que en el archivo css puede poner 0, y el valor se cambiaría más tarde.

<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

hacer estos cambios, creo que éstos trabajarán para usted ...

#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

si sus imágenes tienen que conservar los tamaños especificados, entonces sepa que su página tendrá barra de desplazamiento horizontal. Si prefiere que esto funcionará

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

El ancho ul tiene que ser el (width X 3) + (2 X image-border-if-any} + padding = 2100px + n

Answer 5

Usted acaba de poner a la propiedad de ancho elemento ul.