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

原文由 Babiker 发布，翻译遵循 CC BY-SA 4.0 许可协议

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>

原文由 hbw 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

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

 #ul_top_hypers li {
    float: right;
}

这允许它们仍然是块级的，但会出现在同一行上。

原文由 alex 发布，翻译遵循 CC BY-SA 3.0 许可协议