如何在沒有 JavaScript 的情況下使 CSS 中所有元素的寬度與最寬元素的寬度相同？

如何使用CSS使每個元素與最寬元素的寬度相同

在某些場景下，有必要確保所有元素佈局中的寬度與最寬的元素相同。這可以在 CSS 中實現，而無需借助 JavaScript，這與利用 JavaScript 來實現此效果的流行範例不同。

這種方法的本質在於理解 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 規則，我們可以實現以下結果：

1. Flexbox 容器( .list-container): 父容器利用inline-flex 將子元素(.list)水平對齊line.
2. 清單容器 (.list)：此容器使用 flex-direction: column 在列中垂直對齊清單項目 (.list-item)。
3. 清單項目 (.list-item)：這些元素具有多個樣式屬性，包括允許所有項目顯示大小相等的固定寬度。此外，flex-wrap:wrap 可確保專案在必要時流到多行，模仿基於 JavaScript 的範例的行為。

這裡是一個範例 HTML 結構，示範了此方法的應用:

<div class="list-container">
  <div class="list">
    <div class="list-item">fresh figs</div>
    <div class="list-item">pine nuts</div>
    <div class="list-item">honey</div>
    <div class="list-item">balsamic vinegar</div>
  </div>
</div>

<div class="list-container">
  <div class="list">
    <div class="list-item">fresh figs</div>
    <div class="list-item">pine nuts</div>
    <div class="list-item">honey</div>
    <div class="list-item">balsamic vinegar</div>
  </div>
</div>

總之，可以只使用 CSS 複製基於 JavaScript 的範例的功能。透過採用 Flexbox 的原理，我們可以確保給定佈局中的所有元素都具有與最寬元素相同的寬度，從而創建視覺上一致且有組織的外觀。

以上是如何在沒有 JavaScript 的情況下使 CSS 中所有元素的寬度與最寬元素的寬度相同？的詳細內容。更多資訊請關注PHP中文網其他相關文章！