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>

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

Respuestas:

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>

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>

Matthew Johnson
fuente
3
#ul_top_hypers li {
  display: flex;
}
Kumar Saket
fuente