css - numeracion - Cómo distribuir los elementos de la lista HTML uniformemente en una lista desordenada

listas en html ejemplos

Question

Quiero que mis elementos li que forman un menú horizontal se distribuyan uniformemente en todo el ancho de mi elemento ul . Normalmente hago float mis elementos li a la izquierda y agrego un margen. Pero, ¿cómo coloco el espaciado adecuado para que se extiendan desde la izquierda de mi elemento ul hasta el borde derecho?

Aquí hay un ejemplo de un menú no distribuido en la ul .

El espaciado debe ser el mismo entre cada li . Pero los elementos li pueden ser de diferentes longitudes.

Answer 1

Necesitarás establecer el ancho de los elementos li para forzarlos a llenar el espacio:

ul {
    width: 100%;
}
li {
    float: left;
    width: 33%;
}

( Demostración de violín )

Si agrega más elementos a la lista, deberá ajustar el porcentaje de ancho; por ejemplo, con cuatro elementos, el ancho será del 25%.

Answer 2

No entiendo claramente tu pregunta, así que asumí que podrías querer esto:

li {
    border:solid 1px red;
    clear:both;
    display:block;
    float: left;
    margin: 5px;
    width:100%;
}
ul {
    text-align: center;
    width:300px;
}

Answer 3

Otro enfoque más. Esto es algo que uso cuando trato de abarcar un menú de manera uniforme en toda la página. Es bueno si tiene un menú dinámico que cambiará dependiendo de ciertas condiciones (como una página de administración que solo se muestra si ha iniciado sesión como administrador).

CSS:

nav div ul {
display: table;
width: 100%;
list-style: none;
}
nav div ul li {
display: table-cell;
text-align: center;
}
nav div ul li a {
display: block;
}

Era un poco perezoso, y solo copié esto de mi proyecto actual, así que tendrá que adaptarlo para que se ajuste a su código, pero es mi método preferido para crear un menú horizontal

EDIT: Puede hacer que parezca que se extiende mejor agregando esto:

CSS:

nav div ul li:first-child {
    text-align: left;
}
nav div ul li:last-child {
    text-align: right;
}

Una vez más, sin probar, acaba de escribir.

Answer 4

Tengo dos respuestas para ti.

Si quieres seguir con el modelo de float :

Su elemento ul debe tener el conjunto de propiedades de desbordamiento (sin esta propiedad, su ul (o cualquier elemento que contenga elementos flotantes) no tiene una altura (este es el comportamiento esperado, por favor: http://www.quirksmode.org/css/clearing.html ) y por lo tanto se establecerá de forma predeterminada en una altura de 0; el efecto de esto será que si establece diferentes colores de fondo para su ul / li y su cuerpo, el fondo de su ul no se mostrará).

ul {
    text-align: center;
    width: 300px;
    overflow: auto;
}

Sus elementos li deben tener anchos establecidos, de lo contrario, como elementos flotantes, su ancho se establecerá en lo que contengan. He usado píxeles, a continuación, pero también puedes usar un valor de porcentaje.

li {
    float: left;
    margin: 5px 0 5px 0;
    width: 100px;
    text-align: center;
}

Use la propiedad display:inline-block para sus elementos li (si el soporte para navegadores antiguos no es una prioridad). IE 7 no admite esto, por lo que no es útil si necesita un amplio respaldo entre navegadores, pero crea el efecto que desea, aunque asegúrese de eliminar todos los espacios entre sus etiquetas </li> y <li> , de lo contrario se contarán en el ancho general y se mostrarán como espacios entre los elementos.

Una de las ventajas que tiene este método es que no tiene que conocer ni establecer el ancho del contenedor ul Si usa porcentajes de ancho en sus elementos li contenidos, aún obtendrá el centrado de forma gratuita con la propiedad de alineación de texto que ya tiene. . Esto hace que su diseño sea muy sensible.

Aquí hay un marcado y CSS que funciona de la manera que creo que estás solicitando:

Margen:

<ul>
<li>banana</li><li>orange</li><li>apple</li>
</ul>

CSS:

li {
    display:inline-block;
    margin:5px 0 5px 0;
    width:33.33%;
}
ul {
    text-align: center;
}

• Si prefieres mantener el marcado en varias líneas, tendrás que jugar con los márgenes izquierdo y derecho de tus elementos li en el CSS.
• Si agrega elementos li , tendrá que cambiar el porcentaje de ancho para que coincida (por ejemplo, con cuatro elementos li en su marca, deberá cambiar su CSS para tener un ancho del 25% para cada uno).