<style>
ul.horizontal-list {
display: flex;
list-style: none;
padding: 0;
margin: 0;
}
ul.horizontal-list li {
margin-right: 10px;
}
</style>
<body>
<p>以下是一个横向列表的例子：
<ul class="horizontal-list">
<li>第一项</li>
<li>第二项</li>
<li>第三项</li>
</ul>
</body>
在上面的代码中，我们定义了名为“horizontal-list”的类，并将其应用于ul标签。通过设置display属性为flex，我们可以实现将列表项水平排列。list-style属性是用来隐藏ul默认的圆点。padding和margin属性用来消除默认的缩进和间距，将列表项对齐到一行。
接下来，我们定义列表项（li）的样式。通过设置margin-right属性，我们可以添加项之间的间距，并让列表看起来更舒适。
最后，我们向页面添加一些文本，并在一个ul元素中插入了几个列表项来展示这个横向列表的例子。
总之，通过添加css样式，就可以轻松地把垂直列表变成横向列表，使页面更美观。
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [email protected] 举报，一经查实，本站将立刻删除。
