listas y menú

<< list-style-position Selectores avanzados >>

Una práctica muy habitual es la de usar listas para definir los elementos de un menú (como sabemos en HTML5 el menú va en el <nav>). Es habitual ver los elementos uno al lado del otro, pero como estamos viendo las listas por defecto aparecen un ítem debajo del otro al ser etiquetas de bloque. Para modificar su comportamiento deberemos utilizar la propiedad display para los ítem y forzarles a que se comporten como un elemento en línea para que estén uno tras otro. 

Por ejemplo, en la web del instituto tenemos el siguiente menú:

<nav>
     <ul class="menuPrincipal">
          <li><a title="Alumnos" href="alumnos.html">Alumnos</a></li>
          <li><a title="Profesores" href="profesores.html">Profesores</a></li>
          <li><a title="Madres y padres" href="ampa.html">Madres y padres</a></li>
          <li><a title="Secretaría" href="secretaria.html">Secretaría</a></li>
          <li><a title="Empresas" href="empresas.html">Empresas</a></li>
          <li><a title="Aula virtual" href="aulavirtual.html">Aula virtual</a></li>
     </ul>
</nav>

Todo esto con flex nos sería mucho más sencillo

    <nav>
        <a title="Alumnos" href="alumnos.html">Alumnos</a><a title="Profesores" href="profesores.html">Profesores</a>
        <a title="Madres y padres" href="ampa.html">Madres y padres</a>
        <a title="Secretaría" href="secretaria.html">Secretaría</a>
        <a title="Empresas" href="empresas.html">Empresas</a>
        <a title="Aula virtual" href="aulavirtual.html">Aula virtual</a>
   </nav>

<< list-style-position Selectores avanzados >>