[分享]css中如何设置列表水平显示

在网页设计中，列表是常用的元素之一。有时候，我们希望列表以水平的方式展示，而不是垂直的方式。在这篇文章中，我将演示如何使用 CSS 设置列表水平显示。首先，我们需要添加一个无序列表或有序列表到 HTM...

在网页设计中，列表是常用的元素之一。有时候，我们希望列表以水平的方式展示，而不是垂直的方式。在这篇文章中，我将演示如何使用 CSS 设置列表水平显示。
首先，我们需要添加一个无序列表或有序列表到 HTML 代码中。下面是一个无序列表的示例：

<ul>
  <li>苹果</li>
  <li>香蕉</li>
  <li>橙子</li>
</ul> 

如果你使用有序列表，将“ul”改为“ol”即可。
现在，我们使用 CSS 将此列表变成水平显示：

ul {
  list-style: none;   /* 去掉默认的列表样式 */
  display: flex;      /* 将列表变成弹性容器 */
  margin: 0;          /* 去掉默认的外边距 */
  padding: 0;         /* 去掉默认的内边距 */
}

li {
  margin-right: 20px; /* 添加一些间距 */
} 

上面的 CSS 代码中，我们首先将无序列表设置为弹性容器，然后去掉默认的列表样式、内边距和外边距。接着，我们为列表项添加了一些间距，这样列表项之间就不会挤在一起。
现在，打开 HTML 页面，你会发现列表已经变成水平显示了。
如果你想让列表项总是垂直居中，可以使用以下 CSS 代码：

li {
  display: flex;          /* 将列表项变成弹性容器 */
  align-items: center;    /* 垂直居中 */
  margin-right: 20px;     /* 添加一些间距 */
} 

在上面的代码中，我们为列表项设置了 display: flex 属性，这样它们也变成了弹性容器。然后，使用 align-items 属性把它们垂直居中。
总的来说，使用 CSS 设置列表水平显示非常简单。你只需要将列表容器设置为弹性容器，然后调整一些间距和样式即可。