Bagaimana mengatur gaya daftar UL menjadi satu baris

126

Saya ingin membuat daftar ini dalam satu baris.

Daftar item1
Daftar item2

Harus ditampilkan sebagai

* Daftar item2 * Daftar item2

Gaya CSS apa yang digunakan?

css

— RD
sumber

Saya tahu pertanyaan ini tidak khusus untuk bootstrap tetapi saya menemukan thumbnail bootstrap sangat berguna untuk daftar horizontal teks, gambar, video, dll.

— Anupam

184

ul li{
  display: inline;
}

Untuk lebih lanjut lihat opsi daftar dasar dan daftar horizontal dasar di listamatic. (terima kasih kepada Daniel Straight di bawah untuk tautannya).

Juga, seperti yang ditunjukkan di komentar, Anda mungkin ingin gaya pada ul dan elemen apa pun yang masuk ke dalam li dan li itu sendiri agar semuanya terlihat bagus.

— rz.
sumber

7

Sementara ini menyelesaikan pekerjaan, Anda juga ingin memasukkan beberapa padding untuk menjaga jarak elemen dengan baik

— Rob Allen

1

benar, ini hanya membuat daftar menjadi horizontal. Anda mungkin ingin menambahkan sedikit lebih banyak gaya pada ul, li dan apa pun yang dimasukkan ke dalam li untuk membuat semuanya terlihat bagus.

— rz.

1

Bagaimana cara mendapatkan peluru untuk bertahan? Atau bisakah kita menembak dengan cara lain.

— RD

1

seperti yang ditunjukkan @DotDot: menggunakan {display: inline} menghilangkan gaya butir. Cara menyiasatinya adalah: 1. gunakan {float: left} sebagai gantinya (meskipun tidak bekerja di IE9). 2. tambahkan padding kiri & tambahkan gambar latar belakang (yaitu peluru sebagai gambar latar belakang).

— Adrien Be

26

Di browser modern Anda dapat melakukan hal berikut (sesuai dengan 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>

Luaskan cuplikan

— davidlbaileysr
sumber

15

Kode HTML:

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

Kode CSS:

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

— adel aaji
sumber

9

Cobalah bereksperimen dengan hal seperti ini juga:

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

Saya membuat codepen untuk menggambarkan: http://codepen.io/agm1984/pen/mOxaEM

— agm1984
sumber

0

di bootstrap gunakan .list-inlinekelas 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
sumber