Estirar ul horizontal para ajustar el ancho de div

Para la navegación principal de mi sitio, hay un div ancho de 980px con una ul para los principales enlaces de navegación. Estoy intentando hacer que los enlaces de navegación se estiren para que se ajusten al ancho del div de manera uniforme.Estirar ul horizontal para ajustar el ancho de div

<div style="width: 980px;"> 
<ul id="horizontal-style"> 
    <li><a href="#">Nav Item</a></li> 
    <li><a href="#">Short Item</a></li> 
    <li><a href="#">Really Long Nav Item</a></li> 
    <li><a href="#">Nav Link</a></li> 
    <li><a href="#">Another Link</a></li> 
</ul> 
</div>

Estoy haciendo algunos css típicos para hacer que la lista ul sea horizontal (flotar: izquierda, mostrar: bloque). Puedo modificar el relleno del li para acercarlo mucho, pero lo que realmente necesito es una forma de hacer que se estire para que se ajuste automáticamente. ¿Posible?

Editar Dificultad 1: No se pueden usar las tablas. Dificultad 2: Cada elemento de navegación tendrá un ancho diferente para acomodar nombres de enlaces más largos y más cortos.

Fuente

2011-03-03 Alan

Esta es la forma más fácil de hacerlo: http://jsfiddle.net/thirtydot/jwJBd/

(o con table-layout: fixed para una distribución uniforme anchura: http://jsfiddle.net/thirtydot/jwJBd/59/)

Este won't work en IE7.

#horizontal-style { 
    display: table; 
    width: 100%; 
    /*table-layout: fixed;*/ 
} 
#horizontal-style li { 
    display: table-cell; 
} 
#horizontal-style a { 
    display: block; 
    border: 1px solid red; 
    text-align: center; 
    margin: 0 5px; 
    background: #999; 
}

_{respuesta viejo antes de su edición: http://jsfiddle.net/thirtydot/DsqWr/}

Fuente

2011-03-03 21:34:00 thirtydot

¿Hay alguna manera de hacer lo mismo, pero con espacios pares entre los textos del menú? Ahora el tamaño de la brecha depende de la longitud del texto ... – inf3rno

@ inf3rno: Si entiendo correctamente, adaptar [esto] (http://stackoverflow.com/questions/6865194/fluid-width-with-equally- spaced-divs) en un menú y debería ser lo que quieras. – thirtydot

¡Qué gran solución! ¡Muchas gracias por la distribución de ancho uniforme! +1 – Fonsini

poco elegante (pero efectiva) manera: porcentajes de uso

#horizontal-style { 
    width: 100%; 
} 

li { 
    width: 20%; 
}

Esto sólo funciona con el ejemplo 5 <li>. Para más o menos, modifique su porcentaje en consecuencia. Si tiene otros <li> s en su página, siempre puede asignar a estos particulares una clase de "menú-li" para que solo se vean afectados.

Fuente

2011-03-03 21:26:56 gailbear

Además, es posible que desee considerar el uso de la propiedad 'display: inline-block;' para esto. Entonces puede usar 'text-align: center;' o algo similar en el ul. – gailbear

Gracias, tengo que aclarar, cada artículo tendrá un ancho diferente para acomodar enlaces más largos y más cortos. Publicación principal actualizada. – Alan

La gente odia las tablas de datos no tabulares, pero lo que estás preguntando es exactamente en qué son buenas las tablas. <table width="100%">

Fuente

2011-03-03 21:27:45 Shad

Me encantaría hacer eso, pero no puedo para este sitio en particular. Aunque estoy de acuerdo, ¡no son tan malos como dicen algunas personas! – Alan

#horizontal-style { 
    width: 100%; 
} 

li { 
    width: 20%; 
}

Este enfoque no será sensible, ya que será del 20% en la pantalla más pequeña que sería demasiado pequeño o la otra manera de la anulación sería consulta de medios en diferentes puntos de interrupción.

Fuente

2016-01-26 00:02:02

Estirar ul horizontal para ajustar el ancho de div

Respuesta

Cuestiones relacionadas