Jadi saya ingin menampilkan <li> item dalam satu baris. Tetapi ketika saya menggunakan properti display:inline di peluru CSS menjadi tersembunyi. Saya mencoba ini dari Pertanyaan

HTML

<div class="list">
        <ul class="list-inline">
            <li>Item 1</li>
            <li>Item 2</li>
            <li>Item 3</li>
            <li>Item 4</li>
            <li>Item 5</li>
            <li>Item 6</li>
        </ul>
    </div>

Dan CSSnya

.list{
   display: inline;
}
.list-inline li{
    margin: 10px;
    display: inline;
}

display: inline tampaknya berfungsi tetapi peluru menjadi tersembunyi. Bagaimana saya bisa memperbaiki ini? Lihat JSFiddle

2
Tr0jAn 27 November 2021, 11:38

2 jawaban

Anda dapat menggunakan gaya ini.

.list{
    display: inline;
 }
 .list-inline li{
    margin: 10px;
 }
 .list-inline{
    display: flex;
 }

Apakah ini yang Anda inginkan? Anda dapat menjadikan kotak itu sebagai kotak fleksibel! Jika Anda ingin tahu lebih banyak tentang peluru di css, lihat dokumen w3schools ini👇

https://www.w3schools.com/css/css_list.asp

2
Ambareesh 27 November 2021, 11:51

Saya pikir inline meniadakan peluru, tetapi menggunakan flex dengan flex-direction: row; pada deklarasi ul akan memiliki efek yang Anda cari...

ul {
  flex-direction: row;
  display: flex;
}

.list {
}

.list-inline li {
  margin: 10px;
}
<div class="list">
        <ul class="list-inline">
            <li>Hi</li>
            <li>Hi</li>
            <li>Hi</li>
            <li>Hi</li>
            <li>Hi</li>
            <li>Hi</li>
            <li>Hi</li>
        </ul>
</div>
2
Authentic Science 27 November 2021, 11:51