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

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

Respuestas: