Diseño de listas Diseño de listasSe pueden crear menús horizontales a partir de listas utilizando la propiedad float, como muestra el ejemplo siguiente (basado en una explicación de Marek Prokop):
| ul { } li { } |
|
| ul { list-style-type: none; } li { background-color: #F6E3CA; } |
|
| ul { list-style-type: none; } li { float: left; background-color: #F6E3CA; } |
|
Una vez conseguido un menú horizontal, se pueden aplicar diferentes estilos:
| ul { list-style-type: none; } li { float: left; background-color: #F6E3CA; width: 5em; text-align: center; } |
|
| ul { list-style-type: none; } li { float: left; background-color: #F6E3CA; margin-right: 10px; padding: 0 4px; } |
|
| ul { list-style-type: none; } li { float: left; background-color: #F6E3CA; border: #D7C8B6 2px solid; margin-right: 10px; padding: 0 4px; } |
|
También se puede utilizar la pseudo-clase :hover para mejorar el resultado. Como Internet Explorer sólo admite esta propiedad sobre los enlaces, se debe poner el padding en el enlace en vez de en el elemento de la lista para que el cambio de color afecte a toda la opción del menú.
| ul {
list-style-type: none; } li { float: left; background-color: #F6E3CA; margin-right: 10px; border: #D7C8B6 2px solid; } a { color: black; text-decoration: none; padding: 0 4px; } a:hover { background-color: white; color: #D7C8B6; } |
En caso de querer centrar la lista, en vez de utilizar la propiedad float hay que utilizar la propiedad display en los elementos de la lista (<li>) y la propiedad text-align: center en la lista (<ul> o <ol>)
| ul {
list-style-type: none; text-align: center } li { display: inline; background-color: #F6E3CA; margin-right: 10px; border: #D7C8B6 2px solid; } a { color: black; text-decoration: none; padding: 0 4px; } a:hover { background-color: white; color: #D7C8B6; } |