¿Cómo construir listas horizontales para la programación html5 y css3

A veces, desea barras de botones horizontales. Dado que las listas de HTML5 tienden a ser vertical, que podría estar tentado a pensar que una lista horizontal es imposible. De hecho, CSS3 ofrece todo lo que necesita para convertir exactamente el mismo HTML en una lista horizontal.

Video: Html5/Css3 - menu horizontal + plantilla y codigo (Practica)

No hay necesidad de mostrar el código HTML de nuevo, ya que no ha cambiado en absoluto. (No es grande CSS?) Incluso el CSS no ha cambiado mucho:

Video: Menu horizontal responsive con HTML y CSS

#menu ul {margin-left: -2.5em -} # menú li {list-style-type: none; anchura: 7em-text-align: center-float: left;} # menú a {text-decoration: none; Color: negro-display: block-background-color: # EEEEFF-box-shadow: 5px 5px 5px gris-margin-bottom: 2px; margin-right: 2px; border-radius: 5px; fronteriza: 3px principio # EEEEFF-} #menu a: hover {background-color: # DDDDEE-box-shadow: 3px 3px 3px gris-border: none;}

Las modificaciones son increíblemente simples:

1. Flotar cada elemento de la lista, dando a cada li un flotador izquierdo valor:

   #menu li {list-style-type: none; float: left; anchura: 5em-text-align: centro-}

2. Mueve el margin-left de la totalidad ul mediante la adopción de la margin-left el formato de la li elementos y transferirla a la ul:

   #menu ul {margin-left: -2.5em-}

3. Añadir un margen derecho.

   Video: Menu Horizontal Sencillo [XHTML y CSS]

   Ahora que la barra de botones es horizontal, añadir un poco de espacio a la derecha de cada botón para que no se ven tan apiñados:

   margin-right: 2px;