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

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