css ul li横排

今天我们要介绍一下CSS中的列表横排，即将列表项li在一行中横向排列。 在HTML中，我们可以使用无序列表ul和有序列表ol来创建列表，每个列表项li包裹在ul或ol中。如果默认设置情况下，每个列表项都会在单独的行上垂直排列，而我们可以使用CSS样式来将列表项横向排列。 下面是一个简单的示例代码，其中有3个列表项：

<ul>
   <li>列表项1</li>
   <li>列表项2</li>
   <li>列表项3</li>
</ul>

如果我们想把这3个列表项横向排列，我们需要在CSS中设置以下样式：

ul {
   list-style: none; /* 去掉列表项默认的小黑点 */
   padding: 0; /* 去掉默认的内边距 */
   margin: 0; /* 去掉默认的外边距 */
}

li {
   display: inline-block; /* 把列表项改为行内块元素 */
   margin-right: 10px; /* 列表项之间的间距 */
}

现在我们可以看到效果了，3个列表项被横向排列在一行中：

• 列表项1
• 列表项2
• 列表项3

如果我们想让横排的列表项居中显示，可以使用text-align:center，像这样：

ul {
   list-style: none; /* 去掉列表项默认的小黑点 */
   padding: 0; /* 去掉默认的内边距 */
   margin: 0; /* 去掉默认的外边距 */
   text-align:center; /* 让列表项居中 */
}

li {
   display: inline-block; /* 把列表项改为行内块元素 */
   margin-right: 10px; /* 列表项之间的间距 */
}

现在，我们可以看到横向的3个列表项已经居中显示了。 总结一下，要让无序列表或有序列表的项横向排列，我们需要通过CSS样式来设置它们的display属性为inline-block，同时需要注意列表项之间的间距。如果希望居中显示，我们可以使用text-align:center样式。