<ul>を水平行に表示する方法

106

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>

スニペットを展開

html css html-lists

— バビカー
ソース

良い質問。私はここでの焦点は、最新のWeb標準に合わせてこれを行う方法を本当にだと思う

— アンディ・

132

通常、リストアイテムはブロック要素です。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>

スニペットを展開

— hbw
ソース

2

また、フロートを使用してこの効果を実現し、リストアイテムのブロックの性質を維持しています。

— ジョエル

1

これは興味深いアプローチだと私は言わなければなりません。ただし、リストモデルをボックスモデルから効果的に持ち上げているので、余白などの不必要な手間が生じると思います。

— hbw 2009年

1

@htw：clearfixソリューションのいずれかを使用して、それをギアに戻すことができます。

— アレックス

2

ブロックの性質を保持したい場合は、常にdisplay：inline-blockを使用できますが、この段階では完全にはサポートされていません（主な原因はFx2だと思います）。

— ジェームズB

17

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

#ul_top_hypers li {
    float: right;
}

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

— アレックス
ソース

1

それらを右にフローティングすると、追加の影響があります。それはそれらの順序を入れ替えるので、左から右に、最後から最初になります。

— マシュージェームステイラー

ああ、そうです、それらはマークアップで反転する必要があります（レイアウト/マークアップの分離のためにこれだけです！）

— アレックス

11

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

— ポール・モリエ
ソース

8

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

#ul_top_hypers li {
    float: left;
}

— tjhorner
ソース

7

それはあなたのために働くでしょう：

#ul_top_hypers li {
    display: inline-block;
}

— ビクラム・モホド
ソース

4

他の人が述べたように、あなたが設定することができますliしdisplay:inline;、あるいは左または右を。また、あなたはまた、使用することができますに。以下のスニペットでは、間隔を広げるためにも追加しています。floatlidisplay:flex;uljustify-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

#ul_top_hypers li {
  display: flex;
}

— クマールサケット
ソース