如何使用 CSS 確保所有清單項目與最寬項具有相同的寬度？

如何使用CSS 設定最寬元素的統一項目寬度

您可以透過使用內聯Flexbox 來實現所需的佈局，如中所示提供的CSS 解決方案：

.list-container {
  display: inline-flex;
  flex-direction: row;
  justify-content: center;
}

.list {
  display: flex;
  flex-direction: column;
}

.list-item {
  text-transform: capitalize;
  background-color: rgb(200, 30, 40);
  font-size: 1.3em;
  text-align: left;
  padding: 10px;
  margin: 1px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
}

在此CSS 中，我們將.list-container 設定為內聯Flexbox 顯示，確保其子.list 元素水準顯示。 .list 元素具有垂直 Flexbox 顯示，允許其子 .list-item 元素垂直堆疊。

至關重要的是，.list-item 元素將其 flex-wrap 屬性設為換行。這意味著當它們無法容納在 .list 容器中的一行中時，它們將自動換行到下一行。

此外，我們將 .list- 的 justify-content 屬性設為 flex-start item 元素，這使它們與其 .list 容器的左邊緣對齊。這可確保最長的項目決定清單中所有項目的寬度。

透過實作此 CSS，您可以建立一個佈局，其中所有項目的寬度與最寬元素的寬度相同，從而確保一致且美觀外觀。

以上是如何使用 CSS 確保所有清單項目與最寬項具有相同的寬度？的詳細內容。更多資訊請關注PHP中文網其他相關文章！