web-dev-qa-db-ja.com

<ul>を横一列に表示する方法

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>
htmlcsshtml-lists
98
Babiker

リスト項目は通常ブロック要素です。 displayプロパティを介してインライン要素に変換します。

指定したコードでは、コンテキストセレクターを使用して、リスト自体ではなくdisplay: inlineプロパティをリストアイテムに適用する必要があります（リスト全体にdisplay: inlineを適用しても効果はありません）。

#ul_top_hypers li {
    display: inline;
}

これが実際の例です：

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

右にフロートするように設定することもできます。

#ul_top_hypers li {
    float: right;
}

これにより、ブロックレベルのままにすることができますが、同じ行に表示されます。

15
alex

これを適用するリストのdisplayプロパティをinlineに設定します。 A List Apart にリストを表示する良い説明があります。

11
Paul Morie

@alexが言ったように、あなたはcould右にフロートしますが、マークアップを同じに保ちたい場合は、左にフロートします！

#ul_top_hypers li {
    float: left;
}
7
tjhorner

それはあなたのために働く：

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

他の人が述べたように、liをdisplay:inline;に設定するか、floatをliに左または右に設定できます。さらに、ulでdisplay:flex;を使用することもできます。以下のスニペットでは、justify-content:space-aroundも追加して、間隔を空けています。

フレックスボックスの詳細については、こちらをご覧ください 完全なガイド 。

#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>
3
Matthew Johnson
#ul_top_hypers li {
  display: flex;
}
2
Kumar Saket