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

【问题标题】：How to make a <ul> display in a horizontal row如何使 <ul> 在水平行中显示
【发布时间】：2022-02-28 01:23:13
【问题描述】：

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

【问题讨论】：

标签： html css html-lists

【解决方案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>

【讨论】：

我也用float实现了这个效果，从而保持列表项的块状。
这是一种有趣的方法，我不得不说——但是，我认为这会在边距等方面产生一些不必要的麻烦，因为您实际上是在将列表项从框模型中取出。跨度>
@htw：您可以使用任何 clearfix 解决方案重新启动它。
如果你想保持块的性质，你总是可以使用 display:inline-block ......虽然它在这个阶段并不完全支持（我相信它是 Fx2 的罪魁祸首）。
flexbox 在哪里做呢？像 >> flex-direction: row;

【解决方案2】：

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

#ul_top_hypers li {
    float: right;
}

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

【讨论】：

将它们向右浮动会产生额外的影响：它将交换它们的顺序，因此从左到右它们将是最后到第一个。
啊，是的，它们需要在标记中反转（对于布局/标记的分离来说太多了！）

【解决方案3】：

将display 属性设置为inline，以便将其应用于列表。在A List Apart 上显示列表有一个很好的解释。

【讨论】：

【解决方案4】：

正如@alex 所说，您可以将其浮动到右侧，但如果您想保持标记不变，请将其浮动到左侧！

#ul_top_hypers li {
    float: left;
}

【讨论】：

【解决方案5】：

正如其他人所提到的，您可以将li 设置为display:inline;，或floatli 向左或向右。此外，您还可以在ul 上使用display:flex;。在下面的 sn-p 中，我还添加了 justify-content:space-around 以提供更多间距。

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

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

【讨论】：

【解决方案6】：

它会为你工作：

#ul_top_hypers li {
    display: inline-block;
}

【讨论】：

【解决方案7】：

#ul_top_hypers li {
  display: flex;
}

【讨论】：

【解决方案8】：

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

【讨论】：