1. HTML横向排列实现示例
在HTML中，li标签是用来定义列表中的每一项的，通常使用ul或ol标签包裹，使其变为列表。如果想要实现横向排列，可以通过CSS样式来设定。
1.1 实现CSS样式
ul {
list-style-type: none;
padding: 0;
margin: 0;
}
li {
display: inline-block;
}
在这个实现方式中，我们在ul标签下添加了两个属性，分别是padding和margin，这是为了去掉默认的内外边距。同时，我们设置了list-style-type: none; 隐藏掉了列表的默认样式。
然后，我们在li标签下添加了display: inline-block; 来让每个列表项都可以横向排列。
1.2 HTML代码示例
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
<li>列表项4</li>
</ul>
通过以上CSS样式和HTML代码，我们可以实现一个横向排列的列表。
2. CSS Flexbox实现横向排列
除了上面介绍的CSS样式，我们还可以使用CSS Flexbox来实现横向排列。
2.1 实现CSS样式
ul {
display: flex;
list-style-type: none;
padding: 0;
margin: 0;
}
li {
flex: 1;
}
在这个实现方式中，我们给ul标签添加了display: flex; 属性，这会让ul中的所有子元素都成为flex容器内的项，并在主轴方向上排列。我们还设置了list-style-type、padding、margin这些属性，同样是为了去除默认样式。
接着，我们在li标签下添加了flex: 1; 属性，这会让每个列表项在横向空间上平均分配宽度。
2.2 HTML代码示例
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
<li>列表项4</li>
</ul>
通过以上CSS样式和HTML代码，我们同样可以实现一个横向排列的列表，而且使用flexbox实现可以更好地适应屏幕尺寸的变化。
3. 总结
以上就是两种实现HTML横向排列的方式，分别是使用CSS样式和CSS Flexbox。这两种方式都可以达到横向排列的效果，并且可以根据需求选择使用哪种方式。