Heim > Web-Frontend > CSS-Tutorial > Hauptteil

Wie erreicht man mit CSS identische Breiten für alle Elemente in einer Liste?

Susan Sarandon
Freigeben: 2024-11-18 01:56:02
Original
140 Leute haben es durchsucht

How to Achieve Identical Widths for All Items in a List Using CSS?

Identische Breiten für alle Elemente mit CSS

In vielen Situationen wünschen Sie sich möglicherweise ein Layout, bei dem alle Elemente die gleiche Breite wie das breiteste haben Element, auch wenn sie nicht alle in eine einzelne Zeile passen. Dies kann zu einem optisch ansprechenderen und zusammenhängenderen Ergebnis führen.

CSS-Lösung

Während JavaScript verwendet werden kann, um diesen Effekt zu erzielen, ist es auch möglich, ihn allein mit zu erreichen CSS. Betrachten Sie den folgenden Code:

.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;
}
Nach dem Login kopieren

So funktioniert es

Dieser CSS-Code nutzt die Kombination von Flexbox und Inline-Flex, um das gewünschte Layout zu erreichen.

  • .list-container: Dieses übergeordnete Element legt das horizontale Layout der Listen fest und stellt sicher, dass sie nebeneinander angezeigt werden side.
  • .list: Die untergeordneten Elemente innerhalb von .list-container werden dank Flex-Direction als vertikale Spalten angezeigt: Column.
  • .list-item: Jedes einzelne Element legt seine Breite entsprechend fest das breiteste Element mit Flex-Wrap: Wrap und Justify-Content: Flex-Start. Dadurch wird sichergestellt, dass alle Elemente die gleiche Breite haben wie das breiteste Element in der Liste.

Das obige ist der detaillierte Inhalt vonWie erreicht man mit CSS identische Breiten für alle Elemente in einer Liste?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage