CSS中無(wú)序列表怎么并排

在CSS中，我們可以通過(guò)使用flex布局或者grid布局來(lái)讓無(wú)序列表（ul）中的項(xiàng)目（li）并排顯示，下面是一個(gè)使用flex布局的例子：

HTML代碼：

<ul class="my-list">
  <li>項(xiàng)目1</li>
  <li>項(xiàng)目2</li>
  <li>項(xiàng)目3</li>
  <li>項(xiàng)目4</li>
  <li>項(xiàng)目5</li>
  <li>項(xiàng)目6</li>
  <li>項(xiàng)目7</li>
  <li>項(xiàng)目8</li>
  <li>項(xiàng)目9</li>
  <li>項(xiàng)目10</li>
</ul>

CSS代碼：

.my-list {
  display: flex;
  justify-content: space-between; /* 項(xiàng)目之間保持一定距離 */
}

在這個(gè)例子中，我們給無(wú)序列表（ul）添加了一個(gè)類(lèi)名“my-list”，然后通過(guò)CSS中的flex布局將其設(shè)置為水平排列，justify-content屬性用來(lái)設(shè)置項(xiàng)目之間的間隔，這樣，列表中的所有項(xiàng)目就會(huì)并排放置，而不是默認(rèn)的垂直排列。

如果你想要讓列表中的項(xiàng)目在屏幕寬度較小時(shí)也能保持并排放置，你可以給列表添加一些響應(yīng)式設(shè)計(jì)的CSS代碼，你可以使用媒體查詢(xún)（media query）來(lái)檢測(cè)屏幕寬度，并在屏幕寬度較小時(shí)改變列表的布局方式，這樣，列表中的項(xiàng)目就可以在不同的屏幕寬度下保持并排放置，而不會(huì)影響到頁(yè)面的整體布局。