Wie kann man in CSS dafür sorgen, dass jedes Element die gleiche Breite wie das breiteste Element hat?-CSS-Tutorial-php.cn

Heim

Web-Frontend

CSS-Tutorial

Wie kann man in CSS dafür sorgen, dass jedes Element die gleiche Breite wie das breiteste Element hat?

Susan Sarandon

Nov 28, 2024 pm 05:10 PM

How to Make Every Item the Same Width as the Widest Element in CSS?

So stellen Sie sicher, dass jedes Element die gleiche Breite wie das breiteste Element hat

In diesem Layout wird jedes Element so gestreckt, dass es die Breite des breitesten Elements einnimmt Element, auch in Szenarien, in denen das Element in mehrere Zeilen umgebrochen wird. Um diesen Effekt mit CSS zu erzielen:

 display: inline-flex;<br> flex -direction: row;<br> justify-content: center;<br>}<p>.list {<br> display: flex;<br> Flex-Richtung: Spalte;<br>}</p><p>.list-item {<br> Text-Transform: Großschreibung;<br> Hintergrundfarbe: RGB(200, 30, 40) ;<br> Schriftgröße: 1,3em;<br> Textausrichtung: links;<br> Polsterung: 10px;<br> margin: 1px;<br> display: flex;<br> flex-direction: row;<br> flex-wrap: wrap;<br> justify-content: flex-start;<br>}&lt ;/pre><br></p><pre class="brush:php;toolbar:false"><p></p><div> <div class="list"><pre class="brush:php;toolbar:false"><div><p></p></div><br>

<div><p></p></div><br>

Das obige ist der detaillierte Inhalt vonWie kann man in CSS dafür sorgen, dass jedes Element die gleiche Breite wie das breiteste Element hat?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme

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

Verwandter Artikel

So viele FarblinksApr 13, 2025 am 11:36 AM

Es gab in letzter Zeit eine Reihe von Werkzeugen, Artikeln und Ressourcen über Farbe. Bitte erlauben Sie mir, ein paar Registerkarten zu schließen, indem Sie sie hier für Ihren Vergnügen zusammenrunden.

Wie automatische Margen in Flexbox funktionierenApr 13, 2025 am 11:35 AM

Robin hat dies schon einmal abgedeckt, aber ich habe in den letzten Wochen einige Verwirrung darüber gehört und gesehen, wie eine andere Person einen Stich gemacht hat, um es zu erklären, und ich wollte

Bewegliche Regenbogen unterstreichtApr 13, 2025 am 11:27 AM

Ich liebe das Design der Sandwich -Site. Unter vielen schönen Merkmalen befinden sich diese Schlagzeilen mit Regenbogenuntergründen, die sich beim Scrollen bewegen. Es ist nicht

Neues Jahr, neuer Job? Lassen Sie einen netzbetriebenen Lebenslauf machen!Apr 13, 2025 am 11:26 AM

Viele beliebte Lebenslaufdesigns machen den verfügbaren Seitenraum optimal, indem sie Abschnitte in Gitterform legen. Verwenden wir ein CSS -Netz, um ein Layout zu erstellen, das

Eine Möglichkeit, die Benutzer aus der Gewohnheit herauszubrechen, zu viel neu zu ladenApr 13, 2025 am 11:25 AM

Seiten -Nachladen sind eine Sache. Manchmal aktualisieren wir eine Seite, wenn wir der Meinung sind, dass sie nicht mehr reagiert, oder glauben, dass neue Inhalte verfügbar sind. Manchmal sind wir nur sauer auf

Domänengetriebenes Design mit ReactApr 13, 2025 am 11:22 AM

Es gibt nur sehr wenige Anleitungen zur Organisation von Front-End-Anwendungen in der Welt der Reaktionen. (Bewegen Sie einfach Dateien um, bis es sich „richtig anfühlt“, lol). Die Wahrheit

Erkennen inaktiver BenutzerApr 13, 2025 am 11:08 AM

Meistens kümmert es Sie sich nicht wirklich darum, ob ein Benutzer aktiv mit Ihrer Anwendung inaktiv oder vorübergehend inaktiv ist. Inaktiv, was vielleicht sie vielleicht