informaticaPC

Tutorial de CSS

Listas horizontales

Crear listas horizontales con CSS

Principalmente, debemos aplicar la propiedad CSS display:inline a cada elemento de la lista para colocarlos uno junto al otro, y definir márgenes para separar cada opción.

Código HTML:

<html>
    <head>
        <title>Cursos gratis</title>
        <link rel="stylesheet" type="text/css" href="estilos.css" />
    </head>

    <body>

        <ul id="lista1">
            <li>
                <a href="https://informaticapc.com/">Ir a InformaticaPC</a>
            </li>
            <li>
                <span class="separador">| </span><a href="https://informaticapc.com/blog/">Ir al blog</a>
            </li>
            <li>
                <span class="separador">| </span><a href="http://www.google.es/">Ir a Google</a>
            </li>
            <li>
                <span class="separador">| </span><a href="http://www.yahoo.es/">Ir a Yahoo</a>
            </li>
            <li>
                <span class="separador">| </span><a href="http://www.bing.es/">Ir a Bing</a>
            </li>
        </ul>

    </body>
</html>

Código CSS:

#lista1 {
    font-family:Arial;
    font-weight:bold;
    font-size:13px;
}

.separador {
    color:gray;
}

#lista1 li {
    display:inline;
    padding-left:3px;
    padding-right:3px;
    background-color:black;
}

a {
    color:white;
    text-decoration:none;
}

a:hover {
    color:black;
    background-color:lightgray;
}

Descargar ejemplo

El ejemplo anterior quedaría:

crear lista horizontal con CSS

Primera página Anterior Siguiente Última página
Usamos cookies para ofrecerte una experiencia mejorada, el continuar navegando supone que aceptas su uso