在HTML中，列表通常以垂直形式显示，但有时，我们可能需要将列表项横向排列，并设置一定的间距，这可以通过使用CSS来实现。

以下是如何实现列表项的横向排列和设置间距的详细步骤：

1、创建一个无序列表（ul）或有序列表（ol），并为每个列表项（li）添加内容。

<ul>
  <li>项目1</li>
  <li>项目2</li>
  <li>项目3</li>
  <li>项目4</li>
</ul>

2、使用内联样式或外部样式表来应用CSS样式，这里我们使用内联样式作为示例。

3、为无序列表（ul）添加display: flex属性，这将使列表项横向排列。

<ul style="display: flex;">
  <li>项目1</li>
  <li>项目2</li>
  <li>项目3</li>
  <li>项目4</li>
</ul>

4、设置列表项之间的间距，可以使用margin属性来实现，为每个列表项的右侧添加10像素的间距，可以这样设置：

<ul style="display: flex;">
  <li style="marginright: 10px;">项目1</li>
  <li style="marginright: 10px;">项目2</li>
  <li style="marginright: 10px;">项目3</li>
  <li>项目4</li>
</ul>

5、如果你想在最后一个列表项后面也添加间距，可以在li选择器中添加:lastchild伪类，然后设置marginright属性。

<ul style="display: flex;">
  <li style="marginright: 10px;">项目1</li>
  <li style="marginright: 10px;">项目2</li>
  <li style="marginright: 10px;">项目3</li>
  <li style="marginright: 10px;">项目4</li>
</ul>

6、为了使列表项在同一行上均匀分布，可以为无序列表（ul）添加justifycontent: spacebetween属性，这将使列表项之间的间距相等。

<ul style="display: flex; justifycontent: spacebetween;">
  <li style="marginright: 10px;">项目1</li>
  <li style="marginright: 10px;">项目2</li>
  <li style="marginright: 10px;">项目3</li>
  <li style="marginright: 10px;">项目4</li>
</ul>

现在，你的列表项应该已经横向排列，并且具有相等的间距，你可以根据需要调整间距大小和列表项的数量。