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

Question

Quiero mostrar esta lista en una sola línea.

• Lista elemento1
• elemento2 Lista

debe mostrarse como

* Lista elemento2 * Lista elemento2

Qué estilo CSS para usar?

Answer 1

ul li{ 
    display: inline; 
} 

Para más información, véase la basic list options y a basic horizontal list en listamatic. (gracias a Daniel Straight a continuación para los enlaces).

Además, como se señala en los comentarios, es probable que desee un estilo en el ul y los elementos que entren dentro del li y del li para que las cosas se vean bien.

Answer 2

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; 
} 

Answer 3

En los navegadores modernos se puede hacer lo siguiente (CSS 3 compatible)

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>

Answer 4

Cualquier motivo que muestre: ¿en línea no funcionaría? He conseguido que el estilo funcione y no soy un principiante en absoluto, sino que lo visualizo: en línea no hace nada cuando otras cosas hacen algo. Incluso he eliminado todo lo demás solo para estar seguro de que nada lo estaba afectando pero pase lo que pase, no funciona ...

En realidad, el caballero que publicó arriba con display: flex fue lo que funcionó ... Eso es extraño. ..

Answer 5

trata de 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