Comment garantir que tous les éléments de la liste ont la même largeur que l'élément le plus large à l'aide de CSS ?

Comment définir des largeurs d'éléments uniformes pour l'élément le plus large à l'aide de CSS

Vous pouvez obtenir la mise en page souhaitée en utilisant une flexbox en ligne, comme démontré dans la solution CSS fournie :

.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;
}

Dans ce CSS, nous définissons le .list-container pour avoir une flexbox en ligne display, en veillant à ce que ses éléments .list enfants soient affichés horizontalement. Les éléments .list ont un affichage flexbox vertical, permettant à leurs éléments enfants .list-item de s'empiler verticalement.

Essentiellement, les éléments .list-item ont leur propriété flex-wrap définie pour s'enrouler. Cela signifie que lorsqu'ils ne peuvent pas tenir sur une seule ligne dans leur conteneur .list, ils passeront automatiquement à la ligne suivante.

De plus, nous définissons la propriété justifier-content sur flex-start pour le .list- éléments item, ce qui les amène à s’aligner sur le bord gauche de leur conteneur .list. Cela garantit que l'élément le plus long dicte la largeur de tous les éléments de la liste.

En implémentant ce CSS, vous pouvez créer une mise en page dans laquelle tous les éléments ont la même largeur que l'élément le plus large, garantissant ainsi une cohérence et une esthétique agréable. apparence.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!