如何使在水平行中的显示

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你想这个应用到列表中。有一个关于列表除了显示列表中的一个很好的解释。

Answer 4

由于@alex说，你的可能的浮动是正确的，但如果你想保持的标记一样，它漂浮到左边！

#ul_top_hypers li {
    float: left;
}

Answer 5

它会为你工作：

#ul_top_hypers li {
    display: inline-block;
}

Answer 6

正如其他人所说，你可以设置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>