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

它适合您：

#ul_top_hypers li {
    display: inline-block;
}

Answer 6

正如其他人所提到的，您可以将li设置为display:inline;，或将float设置为左侧或右侧li。此外，您还可以在display:flex;上使用ul。在下面的代码段中，我还添加了justify-content:space-around以增加间距。

有关flexbox的更多信息，请查看此complete guide。

＆＃13;

#div_top_hypers {
    background-color:#eeeeee;
    display:inline;      
}
#ul_top_hypers {
    display: flex;
    justify-content:space-around;
    list-style-type:none;
}

＆＃13;

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

＆＃13;

Answer 7

#ul_top_hypers li {
  display: flex;
}

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

7 个答案: