Come modellare l'elenco UL su una singola riga

Question

Voglio rendere questo elenco su una sola riga.

• Lista voce1
• item2 Lista

dovrebbe essere mostrato come

* Lista item2 * Lista item2

Che stile CSS da usare?

Answer 1

ul li{ 
    display: inline; 
} 

Per ulteriori vedere la basic list options e a basic horizontal list a Listamatic. (grazie a Daniel Straight in basso per i collegamenti).

Inoltre, come indicato nei commenti, è probabile che si desideri eseguire lo styling su ul e gli elementi che si trovano all'interno di li e li stessi per ottenere un aspetto gradevole.

Answer 2

codice HTML:

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

codice CSS:

ul.list li{ 
    width: auto; 
    float: left; 
} 

Answer 3

nei browser moderni è possibile effettuare le seguenti operazioni (CSS3 compliant)

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

Qualsiasi motivo visualizzato: in linea non funzionerebbe? Ho lo styling per funzionare e non sono affatto un principiante, ma display: in linea non fa nulla quando le altre cose fanno qualcosa. Ho anche rimosso tutto il resto solo per essere sicuro che nulla lo riguardasse, ma non importa cosa, non funziona ...

In realtà, il signore che ha pubblicato sopra con display: flex è stato quello che ha funzionato ... È strano. ..

Answer 5

provare a sperimentare con qualcosa di simile anche:

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

Ho fatto una codepen per illustrare: http://codepen.io/agm1984/pen/mOxaEM