如何用CSS讓列表水平排版

在CSS中，我們可以使用多種方法讓列表水平排版，以下是一種常見(jiàn)的方法：

1、使用CSS的display屬性將列表項(xiàng)設(shè)置為inline-block或flex，如果你有一個(gè)ul列表，你可以這樣寫：

ul {
  display: flex;
  list-style: none;
  padding: 0;
}
li {
  margin: 0 10px;
}

在這個(gè)例子中，ul元素的display屬性被設(shè)置為flex，這意味著它的子元素（即li元素）將沿著水平方向排列，而不是默認(rèn)的垂直方向，我們移除了列表的默認(rèn)樣式，并給每個(gè)列表項(xiàng)添加了一些左右的邊距，以防止它們緊緊地?cái)D在一起。

2、如果你想要更細(xì)致的控制，比如希望列表項(xiàng)在容器內(nèi)水平居中，或者有一定的間距，你可以使用CSS的justify-content和align-items屬性。

ul {
  display: flex;
  justify-content: center;
  align-items: center;
  list-style: none;
  padding: 0;
}
li {
  margin: 0 10px;
}

在這個(gè)例子中，justify-content: center;和align-items: center;將列表項(xiàng)在水平和垂直方向上居中。