Cómo diseñar la lista UL en una sola línea

126

Quiero renderizar esta lista en una sola línea.

  • Lista item1
  • Lista item2

Debería mostrarse como

* Lista elemento2 * Lista elemento2

¿Qué estilo CSS usar?

css RD
fuente
Sé que esta pregunta no es específico de arranque, pero me encontré con arranque miniaturas a ser muy útil para la lista horizontal de texto, imágenes, vídeo, etc
Anupam

Respuestas:

184 
ul li{
  display: inline;
}

Para obtener más información, consulte las opciones de la lista básica y una lista horizontal básica en listamatic. (gracias a Daniel Straight a continuación por los enlaces).

Además, como se señaló en los comentarios, es probable que desee diseñar el ul y cualquier elemento que se encuentre dentro de los li's y los li's mismos para que las cosas se vean bien.

rz.
fuente
77
Si bien esto hace el trabajo, también querrás incluir algo de relleno para mantener los elementos bien espaciados
Rob Allen
1
correcto, esto solo hace que la lista sea horizontal. probablemente desee agregar un poco más de estilo al ul, li y lo que sea que vaya en el li para que las cosas se vean bien.
rz.
1
¿Cómo hacer que las balas se queden? ¿O podemos las balas de alguna otra manera?
RD
1
como señala @DotDot: el uso de {display: inline} elimina el estilo de viñeta. Evite esto: 1. use {float: left} en su lugar (aunque no funciona en IE9). 2. agregue un relleno izquierdo y agregue una imagen de fondo (que es la viñeta como imagen de fondo).
Adrien Be
26

En los navegadores modernos puede hacer lo siguiente (compatible con CSS3)

ul
{
  display:flex;  
  list-style:none;
}
<ul>
  <li><a href="">Item1</a></li>
  <li><a href="">Item2</a></li>
  <li><a href="">Item3</a></li>
</ul>
Expandir fragmento

davidlbaileysr
fuente
15

Código HTML:

<ul class="list">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

Código CSS:

ul.list li{
  width: auto;
  float: left;
}
adel aaji
fuente
9

Intenta experimentar con algo como esto también:

HTML

 <ul class="inlineList">
   <li>She</li>
   <li>Needs</li>
   <li>More Padding, Captain!</li>
 </ul>

CSS

 .inlineList {
   display: flex;
   flex-direction: row;
   /* Below sets up your display method: flex-start|flex-end|space-between|space-around */
   justify-content: flex-start; 
   /* Below removes bullets and cleans white-space */
   list-style: none;
   padding: 0;
   /* Bonus: forces no word-wrap */
   white-space: nowrap;
 }
 /* Here, I got you started.
 li {
   padding-top: 50px;
   padding-bottom: 50px;
   padding-left: 50px;
   padding-right: 50px;
 }
 */

Hice un codepen para ilustrar: http://codepen.io/agm1984/pen/mOxaEM

agm1984
fuente