HTML/CSS实现无序列表项同行显示

HTML/CSS实现无序列表项同行显示

默认情况下，无序列表的每个列表项都会单独占据一行。但有时我们希望多个列表项能够在同一行内显示，以达到特定的排版效果。

要实现无序列表项同行显示，可以使用HTML和CSS配合完成。

HTML代码：

<ul class='inline-list'>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

CSS代码：

.inline-list li {
  display: inline-block;
  margin-right: 10px;
}

代码解析：

1. 我们在HTML中创建一个无序列表，并为其添加一个class名为'inline-list'。
2. 在CSS中，我们选中'.inline-list li'，即该无序列表下的所有列表项。
3. 将列表项的'display'属性设置为'inline-block'，使其变成行内块级元素，这样列表项便可以和其他行内元素在同一行显示。
4. 使用'margin-right'属性为每个列表项添加右边距，控制列表项之间的间距。

通过以上代码，我们就可以实现无序列表项在同一行显示的效果了。你可以根据自己的需要调整CSS样式，例如修改间距大小、添加背景颜色等，以达到理想的视觉效果。