Cómo crear: Enlaces de barra de navegación equidistante

Aprende a crear una barra de navegación con enlaces de navegación equidistantes.

Crear una barra de navegación responsiva

Primer paso - Añadir HTML：

<!-- Menú de navegación -->
<div class="navbar">
  <a class="active" href="#">Inicio</a>
  <a href="#">Búsqueda</a>
  <a href="#">Contacto</a>
  <a href="#">Iniciar sesión</a>
</div>

Segundo paso - Añadir CSS：

/* Establecer el estilo del menú de navegación */
.navbar {
  width: 100%;
  background-color: #555;
  overflow: auto;
}
/* Enlaces de navegación */
.navbar a {
  float: left;
  padding: 12px;
  color: white;
  text-decoration: none;
  font-size: 17px;
  width: 25%; /* Cuatro enlaces de igual ancho. Si tiene dos enlaces, use 50%, para tres enlaces, use 33.33%, y así sucesivamente. */
  text-align: center; /* Si desea que el texto esté centrado */
}
/* Añadir color de fondo al pasar el ratón */
.navbar a:hover {
  background-color: #000;
}
/* Establecer el estilo del enlace actual/activo */
.navbar a.active {
  background-color: #04AA6D;
}
/* Añadir capacidad de respuesta - En pantallas con menos de 500 píxeles, hacer que los enlaces de navegación se desplieguen apilados en lugar de mostrarse en paralelo */
@media screen and (max-width: 500px) {
  .navbar a {
    float: none;
    display: block;
    width: 100%;
    text-align: left; /* Si desea alinear el texto a la izquierda en la pantalla pequeña */
  }
}

Prueba por ti mismo

Páginas relacionadas

Tutoriales:Barra de navegación de CSS