Comment obtenir des largeurs identiques pour tous les éléments d'une liste à l'aide de CSS ?

Largeurs identiques pour tous les éléments avec CSS

Dans de nombreuses situations, vous souhaiterez peut-être une mise en page où tous les éléments ont la même largeur que le plus large élément, même s’ils ne tiennent pas tous sur une seule ligne. Cela peut fournir un résultat plus attrayant et plus cohérent.

Solution CSS

Bien que JavaScript puisse être utilisé pour obtenir cet effet, il est également possible de l'accomplir uniquement avec CSS. Considérez le code suivant :

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

Comment ça marche

Ce code CSS exploite la combinaison de flexbox et inline-flex pour obtenir la mise en page souhaitée.

• .list-container : cet élément parent établit la disposition horizontale des listes, garantissant qu'elles apparaissent côte à côte side.
• .list : Les éléments enfants à l'intérieur de .list-container s'affichent sous forme de colonnes verticales grâce à flex-direction: column.
• .list-item : Chaque élément individuel définit sa largeur en fonction l'élément le plus large utilisant flex-wrap : wrap et justifier-content : flex-start. Cela garantit que tous les éléments ont la même largeur que l'élément le plus large de la liste.

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!