如何使用CSS使无序列表项目水平显示？

如何使无序列表水平连续显示

您可以使用 CSS 以多种方式格式化 HTML 元素。一项常见的样式任务是水平排列列表项而不是垂直排列。本文介绍如何使用 display 属性实现此效果。

问题

如何使用 CSS 使列表项水平连续显示？

解决方案

列表项通常是块元素，这意味着它们显示在自己的行上。要使它们水平流动，您需要将它们更改为内联元素。这是使用 display 属性完成的：

#ul_top_hypers li {
  display: inline;
}

在您的初始代码中，您已将 display: inline 属性应用于 ul 元素本身。但是，这仅影响整个列表，而不影响单个列表项。要使列表项水平显示，您需要使用上下文选择器将 display: inline 属性专门应用于它们。

工作示例

这里是一个更新的代码片段，演示如何显示水平连续列出项目：

<div>

#div_top_hypers {
  background-color: #eeeeee;
  display: inline;
}

#ul_top_hypers li {
  display: inline;
}

以上是如何使用CSS使无序列表项目水平显示？的详细内容。更多信息请关注PHP中文网其他相关文章！