如何在水平行中显示<ul>

Question

如何使用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>

Answer 1

列表项通常是块元素.通过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>

Answer 2

您也可以将它们设置为向右浮动.

#ul_top_hypers li {
    float: right;
}

这允许它们仍然是块级别,但将出现在同一行上.

Answer 3

将display属性设置inline为您要应用于的列表.在A List Apart上显示列表有一个很好的解释.

Answer 4

正如@alex所说,你可以正确地漂浮它,但是如果你想保持标记相同,那就把它漂浮到左边!

#ul_top_hypers li {
    float: left;
}

Answer 5

正如其他人所说，你可以设置li到display:inline;，或float在li左或右。此外，您还可以display:flex;在ul. 在下面的代码段中，我还添加justify-content:space-around了更多间距。

有关 flexbox 的更多信息，请查看此完整指南。

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

Answer 6

它将为您工作：

#ul_top_hypers li {
    display: inline-block;
}

Answer 7

#ul_top_hypers li {
  display: flex;
}