Yatay satırda <ul> görüntüsü nasıl yapılır

106

CSS kullanarak liste öğelerimin yatay olarak görünmesini nasıl sağlayabilirim?

#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>

Snippet'i genişlet

html css html-lists

— Babiker
kaynak

iyi soru. Sanırım buradaki odak noktası, bunu en son web standartlarına uygun olarak nasıl yapacağımızdır

— andy

132

Liste öğeleri normalde blok öğelerdir. displayMülk aracılığıyla bunları satır içi öğelere dönüştürün .

Verdiğiniz kodda, display: inlineözelliğin listenin kendisi yerine liste öğelerine uygulanmasını sağlamak için bir bağlam seçici kullanmanız gerekir ( display: inlinegenel listeye başvurmanın bir etkisi olmayacaktır):

#ul_top_hypers li {
    display: inline;
}

İşte çalışan örnek:

#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>

Snippet'i genişlet

— hbw
kaynak

2

Bu etkiyi float kullanarak ve böylece liste öğelerinin blok yapısını koruyarak elde ettim.

— Joel

1

Bu ilginç bir yaklaşım, söylemeliyim - bununla birlikte, liste öğelerini etkin bir şekilde kutu modelinin dışına çıkardığınız için, bunun marjlarla ilgili bazı gereksiz zorluklar yaratacağını düşünüyorum.

— hbw

1

@htw: Clearfix çözümlerinden herhangi biriyle onu tekrar vitese geçirebilirsiniz.

— alex

2

Blok yapısını korumak istiyorsanız her zaman display: inline-block kullanabilirsiniz ... bu aşamada tamamen desteklenmese de (en büyük suçlunun Fx2 olduğuna inanıyorum).

— James B

17

Bunları sağa doğru yüzecek şekilde de ayarlayabilirsiniz.

#ul_top_hypers li {
    float: right;
}

Bu, hala blok seviyesinde olmalarına izin verir, ancak aynı satırda görünecektir.

— Alex
kaynak

1

Onları sağa kaydırmak ekstra bir etkiye sahip olacaktır: sıralarını değiştirecek ve böylece soldan sağa en sondan birinciye kadar olacaklar.

— Matthew James Taylor

Ah evet, işaretlemede ters çevrilmeleri gerekecek (düzen / işaretlemenin ayrılması için çok fazla!)

— alex

11

Bunun uygulanmasını istediğiniz listenin displaymülkü olarak ayarlayın inline. Listeleri Ayrı Bir Listede görüntülemenin iyi bir açıklaması var .

— Paul Morie
kaynak

8

@Alex dediği gibi, olabilir doğru yüzer, ama aynı işaretlemeyi tutmak istiyorsa, sola yüzer!

#ul_top_hypers li {
    float: left;
}

— Tjhorner
kaynak

7

Sizin için çalışacak:

#ul_top_hypers li {
    display: inline-block;
}

— Vikram mohod
kaynak

4

Diğerleri de söylediğim gibi, ayarlayabileceğiniz liiçin display:inline;, ya da sola veya sağa. Ek olarak ,. Aşağıdaki pasajda daha fazla boşluk sağlamak için ekledim .floatlidisplay:flex;uljustify-content:space-around

Flexbox hakkında daha fazla bilgi için, bu eksiksiz kılavuzu inceleyin .

#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>

Snippet'i genişlet

— Matthew Johnson
kaynak

3

#ul_top_hypers li {
  display: flex;
}

— Kumar Saket
kaynak