0

estoy iniciandome a usar flexbox, pero no hay manera de que consiga ajustar bien y nivelar los enlaces del menu de navegación, quedandose apegotonados los li, aún intentandole darles un justify content a los enlaces. Estoy algo confundido dado que he separado inclusive en dos contenedores tanto el titulo como los enlaces y no tengo manera de reajustarlo como quiero. Adjunto el html y scss que estoy construyendo

nav {
  display: flex;
  justify-content: space-between;
  background-color: gray;
  padding: 5px;

  .titulo {
    align-self: flex-start;
  }

  .enlaces {
    ul {
        display: flex;
        
      li {
        display: flex;
        list-style: none;
      }
      a {
        text-decoration: none;
        color: black;
      }
    }
  }
}
<nav>
  <div class="titulo">
    <p>Nombre titulo</p>
  </div>
  <div class="enlaces">
    <ul>
      <li><a href="#">Inicio</a></li>
      <li><a href="#">Carrera</a></li>
      <li><a href="#">Certificaciones</a></li>
      <li><a href="#">Tecnologias</a></li>
      <li><a href="#">Contacto</a></li>
    </ul>
  </div>
</nav>

1 respuesta 1

1

Hay algunas cosas que sobran en el código CSS, pero básicamente, para que los elementos de un flexbox no queden pegados entre sí, puedes usar la propiedad gap. Te adjunto cómo quedaría el código con algunos otros estilos comentados;

nav {
  display: flex;
  justify-content: space-between;
  align-items: center; /* Alinea los elementos del flexbox sobre el eje horizontal */
  background-color: gray;
  padding: 5px;
}

nav .titulo {
  /*align-self: flex-start;*/ /* Eliminada: usando justify-content: space-between en el flexbox, esta línea es innecesaria */
}

nav .enlaces ul {
  display: flex;
  gap: 5px; /* Añade una separación entre cada uno de los elementos includios en el flexbox */
  margin: 0; /* Elimina el margen que por defecto incluye el ul */
  padding: 0; /* Elimina el margen que por defecto incluye el ul */
}

nav .enlaces ul li {
  /*display: flex;*/ /* Eliminada: esta línea es innecesaria, no tienes que ordenar ni distribuir ningún elemento dentro del li, que solo incluye un enlace */
  list-style: none;
}

nav .enlaces ul li a {
  text-decoration: none;
  color: black;
}
<nav>
  <div class="titulo">
    <p>Nombre titulo</p>
  </div>
  <div class="enlaces">
    <ul>
      <li><a href="#">Inicio</a></li>
      <li><a href="#">Carrera</a></li>
      <li><a href="#">Certificaciones</a></li>
      <li><a href="#">Tecnologias</a></li>
      <li><a href="#">Contacto</a></li>
    </ul>
  </div>
</nav>

1
  • 1
    Muchisimas gracias por la solución y explicación, me sirve de mucho!
    – Puntoycoma
    Commented el 22 ene. 2023 a las 20:43

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.