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

小开

最佳答案

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

小开

将要应用此属性的列表的 display属性设置为 inline。对于在分开列表上显示列表有一个很好的解释。

小开

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

#ul_top_hypers li {
float: right;
}

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

小开

正如@alex 所说，可以将它向右浮动，但是如果您想保持标记不变，那么将它向左浮动！

#ul_top_hypers li {
float: left;
}

小开

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

想了解更多关于 Flexbox 的信息，请查看这个完整的指南。

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

小开

这对你有用:

#ul_top_hypers li {
display: inline-block;
}

小开

#ul_top_hypers li {
display: flex;
}

小开

如果希望水平对齐列表项(li)而不影响列表样式，请使用下面提到的属性。 ul{ display:flex; gap:30px; } 间隔: 30px，用于设置列表项之间的间隔。

小开

更具体地说:

#div_top_hypers ul#ul_top_hypers li{
display: inline;
}