podemos asignar el ancho de li

he siguiente página HTML con UL y LI, trato de asignar ancho a cada LI, pero no puedo ver el éxito cayopodemos asignar el ancho de li

<html> 
    <head> 
    <style type="text/css"> 

    ul 
    { 
     overflow-x:hidden; 
    white-space:nowrap; 
    height: 1em; 
     width: 100%; 
    } 

    li 
    { 
    display:inline; 
    padding-right:10px; 
     }  
     </style> 
    </head> 
    <body> 

    <ul> 
     <li style="width:100px">abcdefghijklmonpqrstuvwxyz</li> 
     <li>abcdefghijklmonpqrstuvwxyz</li> 
    <li>abcdefghijklmonpqrstuvwxyz</li> 
    <li>abcdefghijklmonpqrstuvwxyz</li> 
    <li>abcdefghijklmonpqrstuvwxyz</li> 
    <li>abcdefghijklmonpqrstuvwxyz</li> 
     <li>abcdefghijklmonpqrstuvwxyz</li> 
    </ul> 

    </body> 
    </html>

porque cada uno de mi LI tiene una anchura diferente.

Gracias

Fuente

2010-04-23 air

No, no puede asignar ancho a nada que se muestre en línea, que ha configurado que sea LI. En su lugar, lo más frecuente es que desee utilizar display: block; float: left;, que permitirá establecer el ancho.

Fuente

2010-04-23 15:18:08

Usted está dando la li s display: inlinewidth y no se aplica a los elementos inline. Tendrá que usar una alternativa para colocar los elementos uno junto al otro, como flotarlos.

Fuente

2010-04-23 15:18:01 RoToRa

tratar de sustituir su display:inline por display:inline-block

Fuente

2010-04-23 15:18:53 Gregoire

Esto hará el truco, a menos que esté preocupado por mantener el código compatible con XHTML. inline-block no es compatible completamente con el navegador cruzado: http://www.quirksmode.org/css/display.html#t03 –

+1 Esta debería ser la forma de hacer lo que OP quiere. Pero IE (6 y 7?) Solo aplicará 'display: inline-block;' a elementos que están naturalmente en línea ('span', como ejemplo), por lo que hay que tener cuidado con inline-block para las páginas que se pretenden para ser compatible con navegadores * obsoletos *. – ANeves

Para proporcionar más información sobre las dos respuestas anteriores, no se puede especificar el ancho de línea, pero se puede desproteger un ejemplo de cómo hacerlo here

Fuente

2010-04-23 15:24:13 Christin

Pruebe esto CSS

ul { 
white-space: nowrap; 
height: 1em; 
width: 100%; 
} 

li { 
list-style-type: none; 
width: 100px; 
overflow-x: auto; /* change to hidden if that's what you want */ 
float: left; 
margin-right: 10px; 
}

Fuente

2010-04-23 15:29:32 Mottie

Respuesta

Cuestiones relacionadas