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

listas html

Question

Quiero mostrar esta lista en una sola línea.

• Lista item1
• Lista item2

Debería mostrarse como

* Lista item2 * Lista item2

¿Qué estilo CSS usar?

Answer 1

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 2

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ó más arriba con pantalla: flex fue lo que funcionó ... Eso es extraño ...

Answer 3

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>

Answer 4

Intente 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

Answer 5

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 la listamática. (gracias a Daniel Straight a continuación para los enlaces).

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