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; }
So funktioniert es
Dieser CSS-Code nutzt die Kombination von Flexbox und Inline-Flex, um das gewünschte Layout zu erreichen.
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!