css中列表并排

CSS中可以使用display属性来控制列表的排列方式。常见的列表排列方式有水平排列和垂直排列。

1、水平排列

当我们希望将列表项水平排列时，可以使用display属性的值为"inline"或"inline-block"。这样可以使列表项在同一行内水平排列。

示例代码如下：

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

ul {
  list-style-type: none;
}
li {
  display: inline;
  margin-right: 10px;
}

上面的代码中，ul元素是一个无序列表，通过设置list-style-type属性为none，可以去除默认的列表样式。接着，将li元素的display属性设置为inline，这样每个列表项就会在同一行内水平排列。为了增加列表项之间的间距，可以设置margin-right属性。

2、垂直排列

当我们希望将列表项垂直排列时，可以使用display属性的值为"block"。这样可以使每个列表项单独占据一行，垂直排列。

示例代码如下：

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

ul {
  list-style-type: none;
}
li {
  display: block;
  margin-bottom: 10px;
}

上面的代码中，ul元素和li元素的设置与水平排列的示例相同。唯一的区别是将li元素的display属性设置为block，这样每个列表项就会单独占据一行，从而实现垂直排列。

除了以上的水平排列和垂直排列方式，还可以使用flexbox布局来实现更灵活的列表排列。flexbox布局可以通过设置容器的display属性为"flex"，并结合其他属性来控制列表项的排列方式、对齐方式等。

总结一下，CSS中可以使用display属性来控制列表的排列方式。通过设置display属性的值为"inline"、"inline-block"或"block"，可以实现列表项的水平排列和垂直排列。还可以使用flexbox布局来实现更灵活的列表排列。