0

estoy queriendo armar una lista de forma horizontal solamente utilizando Css. El problema es que para que esten en Horizontal estoy haciendo lo asi:

header li{
    float: right;
    padding-right: 10%;
}
header{
    color: white;
    padding: 30px;  
    font-size: 15px;
    border: 2px solid black;
    background-color: rgb(1, 189, 190);
    font-size: 16px;

}

ul{
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

Pero lo quiero centrado, en horizontal y con espacio entre los datos de la lista:

    <header>
        <nav>
            <ul>
                <li><a href="">Banana</a></li>
                <li><a href="">Pera</a></li>
                <li><a href="">Sandia</a></li>
                <li><a href="">Manzana</a></li>
            </ul>
        </nav>
    </header>

Como puedo hacerlo?

1 respuesta 1

1

Hay muchas maneras de realizarlo, incluso centrando con margen automático en el eje horizontal, esta opción es haciéndolo con flexbox, dejo algunos comentarios para que puedas entender mejor lo que se hizo.

header li {
    /* margin: 0 10px;   */
    /* Debajo estamos aplicando separación a los elementos del ul directamente 
    si se desea se puede eliminar el space del ul y jugar con los margenes en
    el eje horizontal
    */
}

a {
  text-decoration: none; /* Remueve estilos de los links */
  color: black; /* Color de los links */
}

header {
  color: white;
  padding: 30px;
  font-size: 15px;
  border: 2px solid black;
  background-color: rgb(1, 189, 190);
  font-size: 16px;
}

ul {
  display: flex; /* Hacemos flex al ul */
  justify-content: center; /* centramos en el eje horizontal*/
  justify-content: space-evenly; /* Aplicamos separación a los elementos dentro del ul */
  margin: 0;
  padding: 0;
  list-style-type: none;
  overflow: hidden;
}
2
  • Muchas gracias! lo entendí perfecto! Commented el 23 feb. 2022 a las 22:13
  • Me alegra mucho, siempre es genial poder dar una mano, que tengas una excelente jornada, quedo a las órdenes! Commented el 23 feb. 2022 a las 22:14

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.