So formatieren Sie die UL-Liste in eine einzelne Zeile

126

Ich möchte diese Liste in einer einzigen Zeile rendern.

Listenelement1
Listenelement2

Sollte als angezeigt werden

* List item2 * List item2

Welchen CSS-Stil soll ich verwenden?

css

— RD
quelle

Ich weiß, dass diese Frage nicht spezifisch für Bootstrap ist, aber ich fand Bootstrap- Miniaturansichten sehr nützlich für die horizontale Liste von Text, Bildern, Videos usw.

— Anupam

183

ul li{
  display: inline;
}

Weitere Informationen finden Sie in den grundlegenden Listenoptionen und in einer grundlegenden horizontalen Liste unter listamatic. (Danke an Daniel Straight unten für die Links).

Wie in den Kommentaren erwähnt, möchten Sie wahrscheinlich auch das Styling der Ul und aller Elemente, die in den Li's und den Li's selbst enthalten sind, damit die Dinge gut aussehen.

— rz.
quelle

7

Während dies die Arbeit erledigt, sollten Sie auch einige Polsterungen einfügen, um den Abstand zwischen den Elementen zu halten

— Rob Allen

1

Richtig, dies macht die Liste nur horizontal. Sie möchten der ul, li und allem, was in der li enthalten ist, wahrscheinlich einiges mehr Styling hinzufügen, damit die Dinge schön aussehen.

— rz.

1

Wie bringt man die Kugeln zum Bleiben? Oder können wir Kugeln auf andere Weise.

— RD

1

Wie @DotDot hervorhebt: Mit {display: inline} wird das Aufzählungszeichen entfernt. Um dies zu umgehen, gehen Sie wie folgt vor: 1. Verwenden Sie stattdessen {float: left} (funktioniert jedoch nicht mit IE9). 2. Fügen Sie eine linke Auffüllung hinzu und fügen Sie ein Hintergrundbild hinzu (das ist die Kugel als Hintergrundbild).

— Adrien Be

26

In modernen Browsern können Sie Folgendes tun (CSS3-kompatibel)

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>

Erweitern Sie das Snippet

— davidlbaileysr
quelle

15

HTML Quelltext:

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

CSS-Code:

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

— Adel Aaji
quelle

9

Versuchen Sie auch mit so etwas zu experimentieren:

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

Ich habe einen Codepen erstellt, um dies zu veranschaulichen: http://codepen.io/agm1984/pen/mOxaEM

— agm1984
quelle

0

Verwenden Sie im Bootstrap die .list-inlineCSS-Klasse

<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
quelle