Cara membuat tampilan <ul> dalam baris horizontal

106

Bagaimana cara membuat item daftar saya muncul secara horizontal dalam satu baris menggunakan CSS?

#div_top_hypers {
    background-color:#eeeeee;
    display:inline;      
}
#ul_top_hypers {
    display: inline;
}
<div id="div_top_hypers">
    <ul id="ul_top_hypers">
        <li>&#8227; <a href="" class="a_top_hypers"> Inbox</a></li>
        <li>&#8227; <a href="" class="a_top_hypers"> Compose</a></li>
        <li>&#8227; <a href="" class="a_top_hypers"> Reports</a></li>
        <li>&#8227; <a href="" class="a_top_hypers"> Preferences</a></li>
        <li>&#8227; <a href="" class="a_top_hypers"> logout</a></li>
    </ul>
</div>
Luaskan cuplikan

html css html-lists Babiker
sumber
Pertanyaan bagus. Saya pikir fokusnya di sini sebenarnya adalah bagaimana melakukan ini sesuai dengan standar web terbaru
andy

Jawaban:

132

Item daftar biasanya merupakan elemen blok. Ubah menjadi elemen sebaris melalui displayproperti.

Dalam kode yang Anda berikan, Anda perlu menggunakan pemilih konteks untuk membuat display: inlineproperti berlaku untuk item daftar, bukan daftar itu sendiri (menerapkan display: inlineke daftar keseluruhan tidak akan berpengaruh):

#ul_top_hypers li {
    display: inline;
}

Berikut adalah contoh kerjanya:

#div_top_hypers {
    background-color:#eeeeee;
    display:inline;      
}
#ul_top_hypers li{
    display: inline;
}
<div id="div_top_hypers">
    <ul id="ul_top_hypers">
        <li>&#8227; <a href="" class="a_top_hypers"> Inbox</a></li>
        <li>&#8227; <a href="" class="a_top_hypers"> Compose</a></li>
        <li>&#8227; <a href="" class="a_top_hypers"> Reports</a></li>
        <li>&#8227; <a href="" class="a_top_hypers"> Preferences</a></li>
        <li>&#8227; <a href="" class="a_top_hypers"> logout</a></li>
    </ul>
</div>
Luaskan cuplikan

hbw
sumber
2
Saya juga mencapai efek ini dengan menggunakan float, dengan demikian menjaga sifat blok dari item daftar.
Joel
1
Itu adalah pendekatan yang menarik, saya harus mengatakan — namun, saya pikir itu akan menimbulkan kerepotan yang tidak perlu dengan margin dan semacamnya, karena Anda secara efektif mengangkat item daftar dari model kotak.
hbw
1
@ Htw: Anda dapat memulai kembali dengan solusi clearfix apa pun.
alex
2
Anda selalu dapat menggunakan display: inline-block jika Anda ingin mempertahankan sifat blokir ... meskipun itu tidak sepenuhnya didukung pada tahap ini (saya yakin Fx2 yang menjadi penyebab utamanya).
James B
17

Anda juga bisa mengaturnya agar mengapung ke kanan.

#ul_top_hypers li {
    float: right;
}

Ini memungkinkan mereka untuk tetap berada di level blok, tetapi akan muncul di baris yang sama.

alex
sumber
1
Mengambangnya ke kanan akan memiliki pengaruh ekstra: ini akan menukar urutannya sehingga dari kiri ke kanan akan menjadi yang terakhir menjadi yang pertama.
Matthew James Taylor
Ah ya, mereka harus dibalik dalam markup (begitu banyak untuk pemisahan tata letak / markup!)
alex
11

Setel displayproperti ke inlineuntuk daftar yang ingin Anda terapkan ini. Ada penjelasan bagus untuk menampilkan daftar di A List Apart .

Paul Morie
sumber
8

Seperti yang dikatakan @alex, Anda dapat mengapungkannya dengan benar, tetapi jika Anda ingin menjaga markupnya tetap sama, arahkan ke kiri!

#ul_top_hypers li {
    float: left;
}
tjhorner
sumber
7

Ini akan berhasil untuk Anda:

#ul_top_hypers li {
    display: inline-block;
}
vikram mohod
sumber
4

Seperti orang lain telah disebutkan, Anda dapat mengatur liuntuk display:inline;, atau floatyang likiri atau kanan. Selain itu, Anda juga dapat menggunakan display:flex;di ul. Dalam potongan di bawah ini saya juga menambahkan justify-content:space-arounduntuk memberikan lebih banyak jarak.

Untuk informasi lebih lanjut tentang flexbox, lihat panduan lengkap ini .

#div_top_hypers {
    background-color:#eeeeee;
    display:inline;      
}
#ul_top_hypers {
    display: flex;
    justify-content:space-around;
    list-style-type:none;
}
<div id="div_top_hypers">
    <ul id="ul_top_hypers">
        <li>&#8227; <a href="" class="a_top_hypers"> Inbox</a></li>
        <li>&#8227; <a href="" class="a_top_hypers"> Compose</a></li>
        <li>&#8227; <a href="" class="a_top_hypers"> Reports</a></li>
        <li>&#8227; <a href="" class="a_top_hypers"> Preferences</a></li>
        <li>&#8227; <a href="" class="a_top_hypers"> logout</a></li>
    </ul>
</div>
Luaskan cuplikan

Matthew Johnson
sumber
3 
#ul_top_hypers li {
  display: flex;
}
Kumar Saket
sumber