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

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

0

en bootstrap use la .list-inlineclase css

<ul class="list-inline">
    <li>Coffee</li>
    <li>Tea</li>
    <li>Milk</li>
</ul>

Ref: https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_ref_txt_list-inline&stacked=h

— Matee Gojra
fuente