Wie kann mithilfe von CSS sichergestellt werden, dass alle Listenelemente dieselbe Breite wie das breiteste Element haben?

So legen Sie mit CSS einheitliche Elementbreiten für das breiteste Element fest

Sie können das gewünschte Layout erreichen, indem Sie Inline-Flexbox verwenden, wie in gezeigt die bereitgestellte CSS-Lösung:

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

In diesem CSS stellen wir den .list-Container so ein, dass er eine Inline-Flexbox-Anzeige hat, um sicherzustellen, dass seine untergeordneten .list-Elemente horizontal angezeigt werden. Die .list-Elemente verfügen über eine vertikale Flexbox-Anzeige, sodass ihre untergeordneten .list-item-Elemente vertikal gestapelt werden können.

Entscheidend ist, dass die Flex-Wrap-Eigenschaft der .list-item-Elemente auf „Wrap“ eingestellt ist. Das heißt, wenn sie nicht in eine einzelne Zeile in ihrem .list-Container passen, werden sie automatisch in die nächste Zeile umgebrochen.

Außerdem setzen wir die Eigenschaft „justify-content“ auf „flex-start“ für den .list-Container. item-Elemente, wodurch sie am linken Rand ihres .list-Containers ausgerichtet werden. Dadurch wird sichergestellt, dass das längste Element die Breite aller Elemente in der Liste bestimmt.

Durch die Implementierung dieses CSS können Sie ein Layout erstellen, in dem alle Elemente die gleiche Breite wie das breiteste Element haben, wodurch ein einheitliches und ästhetisch ansprechendes Ergebnis gewährleistet wird Aussehen.

Das obige ist der detaillierte Inhalt vonWie kann mithilfe von CSS sichergestellt werden, dass alle Listenelemente dieselbe Breite wie das breiteste Element haben?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!