html - para - ¿Cómo justifico una lista horizontal?
menu horizontal html sin css (9)
Tengo una barra de navegación horizontal como la siguiente:
<ul id = "Navigation">
<li><a href = "About.html">About</a></li>
<li><a href = "Contact.html">Contact</a></li>
<!-- ... -->
</ul>
Yo uso CSS para eliminar los puntos de bala y hacerla horizontal.
#Navigation li
{
list-style-type: none;
display: inline;
}
Estoy tratando de justificar el texto para que cada enlace se extienda de manera uniforme para llenar la totalidad del espacio de la ul . Intenté agregar text: justify a los selectores li y ul , pero aún están alineados a la izquierda.
#Navigation
{
text-align: justify;
}
#Navigation li
{
list-style-type: none;
display: inline;
text-align: justify;
}
Esto es extraño, porque si uso text-align: right , se comporta como se espera.
¿Cómo extiendo los enlaces de manera uniforme?
Enfoque moderno - Flexboxes CSS3
Ahora que tenemos flexboxes CSS3 , ya no necesita recurrir a trucos y soluciones para que esto funcione. Afortunadamente, la compatibilidad con el navegador ha recorrido un largo camino y la mayoría de nosotros puede comenzar a utilizar flexboxes.
Simplemente configure la display del elemento principal para flex y luego cambie la propiedad justify justify-content a space-between space-around o space-around para agregar espacio entre / alrededor de los elementos de la caja flexible del elemento secundario. Luego, agregue prefijos de proveedores adicionales para obtener más soporte de navegador .
Usando justify-content: space-between - space-between :
ul {
list-style: none;
padding: 0;
margin: 0;
}
.menu {
display: flex;
justify-content: space-between;
}
<ul class="menu">
<li>About</li>
<li>Contact</li>
<li>Contact Longer Link</li>
<li>Contact</li>
</ul>
Usando justify-content: space-around - space-around :
ul {
list-style: none;
padding: 0;
margin: 0;
}
.menu {
display: flex;
justify-content: space-around;
}
<ul class="menu">
<li>About</li>
<li>Contact</li>
<li>Contact Longer Link</li>
<li>Contact</li>
</ul>
Debe tener los elementos <li> separados, de lo contrario, la justificación no funcionará.
For example, this:
<ul><li>test</li><li>test</li></ul>
needs to be like this:
<ul>
<li>test</li>
<li>test</li>
</ul>
o al menos tener espacios entre las etiquetas de apertura y cierre <li>.
Esto podría satisfacer sus necesidades:
#Navigation{
}
#Navigation li{
list-style-type: none;
text-align: center;
float: left;
width: 50%; /*if 2 <li> elements, 25% if 4...*/
}
demostración : http://jsfiddle.net/KmqzQ/
Esto también se puede lograr usando un pseudo elemento en el elemento ul :
ul {
margin: 0;
padding: 0;
list-style-type: none;
text-align: justify;
}
ul:after {
content: "";
width: 100%;
display: inline-block;
}
li {
display: inline;
}
HTML
<ul id="Navigation">
<li><a href="#">The Missing Link</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Riluri</a></li>
<li><a href="#">Contact us</a></li>
<!-- ... -->
<li class="stretch"></li>
</ul>
CSS
#Navigation {
list-style-type: none;
text-align: justify;
height: 21px;
background: #ccc
}
#Navigation li{
display: inline
}
#Navigation li a {
text-align: left;
display:inline-block;
}
#Navigation .stretch {
display: inline-block;
width: 100%;
/* if you need IE6/7 support */
*display: inline;
zoom: 1
}
Ver demostración: http://jsfiddle.net/2kRJv/392/
La respuesta marcada no funciona si tiene un espacio en blanco.
La respuesta principal aquí funciona con espacios en blanco ¿Cómo justifico * realmente * un menú horizontal en HTML + CSS?
Necesitas usar un "truco" para hacer que esto funcione.
Ver: http://jsfiddle.net/2kRJv/
HTML:
<ul id="Navigation">
<li><a href="About.html">About</a></li>
<li><a href="Contact.html">Contact</a></li>
<!-- ... -->
<li class="stretch"></li>
</ul>
CSS:
#Navigation
{
list-style-type: none;
text-align: justify;
height: 21px;
background: #ccc
}
#Navigation li
{
display: inline
}
#Navigation .stretch {
display: inline-block;
width: 100%;
/* if you need IE6/7 support */
*display: inline;
zoom: 1
}
Detalles sobre el engaño de IE6 / 7: el bloque en línea no funciona en internet explorer 7, 6
Solo haz:
ul { width:100%; }
ul li {
display:table-cell;
width:1%;
}
Este blog tiene una solución satisfactoriamente robusta. Sin embargo, necesita algunos cambios leves para adaptarse a una navegación ul/li :
#Navigation {
width: 100%;
padding: 0;
text-align: justify;
font-size: 0;
font-size: 12px/9; /* IE 6-9 */
}
#Navigation>li {
font-size: 12px;
text-align: center;
display: inline-block;
zoom: 1;
*display: inline; /* IE only */
}
#Navigation:after {
content:"";
width: 100%;
display: inline-block;
zoom: 1;
*display: inline;
}