Menú horizontal: elementos de lista con margen variable

Normalmente, al crear un menú horizontal, emplearemos una lista de elementos de este tipo:

Si queremos que los elementos de nuestra lista estén separados entre sí a una distancia variable, bastará con añadir estas dos clases al elemento ul:

display: flex;
justify-content: space-between;

Ejemplo básico de cómo quedarían los estilos para nuestro menú horizontal:

nav ul {
margin: 0;
padding: 0;
display: flex;
justify-content: space-between;
}
nav li {
display: inline;
}

Puedes descargar el ejemplo en HTML haciendo clic en el siguiente enlace: Descargar ejemplo

No hay comentarios:

Publicar un comentario

Entradas populares