119

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>

4

8 に答える 8

156

リストアイテムは通常、ブロック要素です。プロパティを介してそれらをインライン要素に変換し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>

于 2009-05-20T00:37:55.020 に答える
19

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

#ul_top_hypers li {
    float: right;
}

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

于 2009-05-20T01:01:20.777 に答える
11

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

于 2009-05-20T00:40:27.540 に答える
9

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

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

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

于 2016-09-02T19:23:33.200 に答える