Come modellare l'elenco UL su una singola riga

126

Voglio rendere questo elenco in una singola riga.

Voce di elenco 1
Voce di elenco 2

Dovrebbe essere mostrato come

* Voce di elenco2 * Voce di elenco2

Quale stile CSS utilizzare?

css

— RD
fonte

So che questa domanda non è specifica per il bootstrap, ma ho trovato che le miniature del bootstrap sono molto utili per l'elenco orizzontale di testo, immagini, video ecc.

— Anupam

184

ul li{
  display: inline;
}

Per ulteriori informazioni, vedere le opzioni dell'elenco di base e un elenco orizzontale di base su listamatic. (grazie a Daniel Straight sotto per i link).

Inoltre, come sottolineato nei commenti, probabilmente vorrai lo styling su ul e qualsiasi elemento che vada dentro i li e gli stessi li per far sembrare le cose belle.

— rz.
fonte

7

Mentre questo porta a termine il lavoro, vorrai anche includere un po 'di imbottitura per mantenere gli elementi ben distanziati

— Rob Allen,

1

corretto, questo rende solo l'elenco orizzontale. probabilmente vorrai aggiungere un po 'più di stile a ul, li e qualsiasi cosa vi sia per rendere le cose belle.

— rz.

1

Come far restare i proiettili? O possiamo proiettili in qualche altro modo.

— RD

1

come sottolinea @DotDot: l'utilizzo di {display: inline} rimuove lo stile del punto elenco. Aggirare questo è: 1. utilizzare {float: left} invece (non funziona su IE9 però). 2. aggiungi una spaziatura interna a sinistra e aggiungi un'immagine di sfondo (che è il punto elenco come immagine di sfondo).

— Adrien Be

26

Nei browser moderni puoi fare quanto segue (conforme a 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>

Espandi lo snippet

— davidlbaileysr
fonte

15

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

— adel aaji
fonte

9

Prova a sperimentare anche con qualcosa di simile:

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 creato una codepen per illustrare: http://codepen.io/agm1984/pen/mOxaEM

— agm1984
fonte

0

in bootstrap usa la .list-inlineclasse css

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

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

— Matee Gojra
fonte