如何使用 CSS 實作清單中所有項目的寬度相同？

使用CSS 的所有項目的寬度相同

在許多情況下，您可能希望所有項目的寬度都與最寬的寬度相同元素，即使它們不能全部放在一行上。這可以提供更具視覺吸引力和凝聚力的結果。

CSS 解

雖然可以使用 JavaScript 來實現此效果，但也可以單獨使用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 程式碼利用 flexbox 和 inline-flex 的組合來實現所需的佈局。

• .list-container：此父元素建立列表的水平佈局，確保它們並排顯示side.
• .list：.list-container 內的子元素由於 flex-direction顯示為垂直列：column.
• .list-item：每個單獨的項目設定其寬度以匹配最寬的項目使用flex-wrap：wrap和justify-content：flex-start。這可確保所有元素與清單中最寬的元素具有相同的寬度。

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