43. Barra de navegación CSS (2)

Hay dos formas de crear una barra de navegación horizontal. Uso de elementos de lista en línea o uso de float.

Elementos de lista en línea

Una forma de construir una barra de navegación horizontal es especificar los elementos <li> como en línea, además del código «estándar» del capítulo anterior.

Ejm

<!DOCTYPE html>
<html>
  <head>
    <style>
      ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
      }

      li {
        display: inline;
      }
    </style>
  </head>
  <body>
    <ul>
      <li><a href="#home">Home</a></li>
      <li><a href="#news">News</a></li>
      <li><a href="#contact">Contact</a></li>
      <li><a href="#about">About</a></li>
    </ul>
  </body>
</html>

Ejm explicado

  • display: inline; – Por defecto, los elementos <li> son elementos de bloque. Aquí, eliminamos los saltos de línea antes y después de cada elemento de la lista para mostrarlos en una línea.

Haciendo flotar ítems de lista

Otra forma de crear una barra de navegación horizontal es hacer flotar los elementos <li> y especificar un diseño para los enlaces de navegación.

Ejm

<!DOCTYPE html>
<html>
  <head>
    <style>
      ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
        overflow: hidden;
      }

      li {
        float: left;
      }

      li a {
        display: block;
        padding: 8px;
        background-color: #dddddd;
      }
    </style>
  </head>
  <body>
    <ul>
      <li><a href="#home">Home</a></li>
      <li><a href="#news">News</a></li>
      <li><a href="#contact">Contact</a></li>
      <li><a href="#about">About</a></li>
    </ul>
  </body>
</html>

Nota: overflow:hidden se agrega al elemento ul para evitar que los elementos li salgan de la lista.

Scroll al inicio