Cómo hacer una pantalla <ul> en una fila horizontal

106

¿Cómo puedo hacer que los elementos de mi lista aparezcan horizontalmente en una fila usando CSS?

#div_top_hypers {
    background-color:#eeeeee;
    display:inline;      
}
#ul_top_hypers {
    display: inline;
}

<div id="div_top_hypers">
    <ul id="ul_top_hypers">
        <li>&#8227; <a href="" class="a_top_hypers"> Inbox</a></li>
        <li>&#8227; <a href="" class="a_top_hypers"> Compose</a></li>
        <li>&#8227; <a href="" class="a_top_hypers"> Reports</a></li>
        <li>&#8227; <a href="" class="a_top_hypers"> Preferences</a></li>
        <li>&#8227; <a href="" class="a_top_hypers"> logout</a></li>
    </ul>
</div>

Expandir fragmento

html css html-lists

— Babiker
fuente

buena pregunta. Creo que el enfoque aquí es realmente cómo hacer esto de acuerdo con los últimos estándares web

— Andy

132

Los elementos de la lista son normalmente elementos de bloque. Conviértalos en elementos en línea a través de la displaypropiedad.

En el código que proporcionó, debe usar un selector de contexto para que la display: inlinepropiedad se aplique a los elementos de la lista, en lugar de a la lista en sí (la aplicación display: inlinea la lista general no tendrá ningún efecto):

#ul_top_hypers li {
    display: inline;
}

Aquí está el ejemplo de trabajo:

#div_top_hypers {
    background-color:#eeeeee;
    display:inline;      
}
#ul_top_hypers li{
    display: inline;
}

<div id="div_top_hypers">
    <ul id="ul_top_hypers">
        <li>&#8227; <a href="" class="a_top_hypers"> Inbox</a></li>
        <li>&#8227; <a href="" class="a_top_hypers"> Compose</a></li>
        <li>&#8227; <a href="" class="a_top_hypers"> Reports</a></li>
        <li>&#8227; <a href="" class="a_top_hypers"> Preferences</a></li>
        <li>&#8227; <a href="" class="a_top_hypers"> logout</a></li>
    </ul>
</div>

Expandir fragmento

— hbw
fuente

2

También logré este efecto usando float, manteniendo así la naturaleza de bloque de los elementos de la lista.

— Joel

1

Es un enfoque interesante, tengo que decirlo; sin embargo, creo que crearía algunos problemas innecesarios con los márgenes y demás, ya que efectivamente está sacando los elementos de la lista del modelo de caja.

— hbw

1

@htw: Puede volver a ponerlo en marcha con cualquiera de las soluciones clearfix.

— alex

2

Siempre puede usar display: inline-block si desea conservar la naturaleza del bloque ... aunque no es completamente compatible en esta etapa (creo que Fx2 es el principal culpable).

— James B

17

También puede configurarlos para que floten hacia la derecha.

#ul_top_hypers li {
    float: right;
}

Esto les permite seguir estando a nivel de bloque, pero aparecerán en la misma línea.

— alex
fuente

1

Hacerlos flotar hacia la derecha tendrá un efecto adicional: cambiará el orden de ellos, por lo que de izquierda a derecha serán los últimos a los primeros.

— Matthew James Taylor

Ah, sí, deberán invertirse en el marcado (¡tanto para la separación de diseño / marcado!)

— Alex

11

Establezca la displaypropiedad en inlinepara la lista a la que desea aplicar esto. Hay una buena explicación sobre cómo mostrar listas en A List Apart .

— Paul Morie
fuente

8

Como @alex dicho, usted podría flotar bien, pero si quería mantener el margen de beneficio del mismo, flotar hacia la izquierda!

#ul_top_hypers li {
    float: left;
}

— tjhorner
fuente

7

Funcionará para ti:

#ul_top_hypers li {
    display: inline-block;
}

— vikram mohod
fuente

4

Como han mencionado otros, puede configurar el lia display:inline;, o floatla liizquierda o la derecha. Además, también puede usar display:flex;en el ul. En el fragmento de abajo también agregué justify-content:space-aroundpara darle más espacio.

Para obtener más información sobre flexbox, consulte esta guía completa .

#div_top_hypers {
    background-color:#eeeeee;
    display:inline;      
}
#ul_top_hypers {
    display: flex;
    justify-content:space-around;
    list-style-type:none;
}

<div id="div_top_hypers">
    <ul id="ul_top_hypers">
        <li>&#8227; <a href="" class="a_top_hypers"> Inbox</a></li>
        <li>&#8227; <a href="" class="a_top_hypers"> Compose</a></li>
        <li>&#8227; <a href="" class="a_top_hypers"> Reports</a></li>
        <li>&#8227; <a href="" class="a_top_hypers"> Preferences</a></li>
        <li>&#8227; <a href="" class="a_top_hypers"> logout</a></li>
    </ul>
</div>

Expandir fragmento

— Matthew Johnson
fuente

3

#ul_top_hypers li {
  display: flex;
}

— Kumar Saket
fuente