如何使< ul>显示在水平行 [英] How to make a <ul> display in a horizontal row

问题描述

如何使用CSS将我的列表项水平排列成一行？

How can I make my list items appear horizontally in a row using 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>

推荐答案

列表项通常是块元素。通过 display 属性将它们转换为内联元素。

List items are normally block elements. Turn them into inline elements via the display property.

在您给出的代码中，您需要使用上下文选择器以使 display：inline 属性应用于列表项，而不是列表本身（应用 display：inline 到整个列表将没有效果）：

In the code you gave, you need to use a context selector to make the display: inline property apply to the list items, instead of the list itself (applying display: inline to the overall list will have no effect):

#ul_top_hypers li {
    display: inline;
}

这篇关于如何使< ul>显示在水平行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！