如何使用 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中文网其他相关文章！