Jak stylizować listę UL na jedną linię

126

Chcę wyświetlić tę listę w jednym wierszu.

Pozycja listy 1
Pozycja listy 2

Powinien być wyświetlany jako

* Pozycja listy 2 * Pozycja listy 2

Jakiego stylu CSS użyć?

css

— R & D
źródło

Wiem, że to pytanie nie jest specyficzne dla bootstrapa, ale uważam, że miniatury bootstrap są bardzo przydatne w przypadku poziomej listy tekstu, obrazów, wideo itp.

— Anupam

184

ul li{
  display: inline;
}

Aby uzyskać więcej informacji, zobacz podstawowe opcje list i podstawową listę poziomą na listamatic. (podziękowania dla Daniela Straight poniżej za linki).

Ponadto, jak wskazano w komentarzach, prawdopodobnie chcesz stylizować ul i wszelkie elementy wewnątrz li i same li, aby wszystko wyglądało ładnie.

— rz.
źródło

7

Chociaż to załatwi sprawę, zechcesz również zastosować wyściółkę, aby elementy były dobrze rozmieszczone

— Rob Allen

1

prawda, to tylko sprawia, że lista jest pozioma. prawdopodobnie chcesz dodać trochę więcej stylizacji do ul, li i wszystkiego, co się dzieje w li, aby wszystko wyglądało ładnie.

— rz.

1

Jak sprawić, by kule pozostały? Albo możemy kule w inny sposób.

— RD

1

jak wskazuje @DotDot: użycie {display: inline} usuwa styl punktora. Aby obejść ten problem: 1. zamiast tego użyj {float: left} (nie działa jednak na IE9). 2. dodać wypełnienie z lewej strony i dodać obraz tła (czyli punktor jako obraz tła).

— Adrien Be

26

W nowoczesnych przeglądarkach możesz wykonać następujące czynności (zgodne z 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>

Rozwiń fragment

— davidlbaileysr
źródło

15

Kod HTML:

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

Kod CSS:

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

— adel aaji
źródło

9

Spróbuj też poeksperymentować z czymś takim:

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

Zrobiłem kodepen, aby zilustrować: http://codepen.io/agm1984/pen/mOxaEM

— agm1984
źródło

0

w bootstrapie użyj .list-inlineklasy css

<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
źródło