Maison > interface Web > tutoriel CSS > Comment faire en sorte que chaque élément ait la même largeur que l'élément le plus large en CSS ?

Comment faire en sorte que chaque élément ait la même largeur que l'élément le plus large en CSS ?

Susan Sarandon
Libérer: 2024-11-28 17:10:12
original
605 Les gens l'ont consulté

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

Comment faire en sorte que chaque élément ait la même largeur que l'élément le plus large

Dans cette disposition, chaque élément s'étire pour occuper la largeur de l'élément le plus large élément, même dans les scénarios où l'élément s'enroule sur plusieurs lignes. Pour obtenir cet effet en utilisant CSS :

<div>


 display: inline-flex;<br> flex -direction : ligne ;<br> justifier-contenu : centre ;<br>}</p><p>.list {<br> display: flex;<br> flex-direction: column;<br>}</p><p>.list-item {<br> text-transform: majuscule;<br> background-color: rgb(200, 30, 40);<br> taille de la police : 1,3em;<br> alignement du texte : gauche;<br> remplissage : 10px;<br> margin : 1px;<br> display: flex;<br> flex-direction: row;<br> flex-wrap: wrap;<br> justifier-content: flex-start;<br>}&lt ;/pre><br><pre class="brush:php;toolbar:false"><p><div> <div class="list"></p>
<div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><div>
Copier après la connexion
Copier après la connexion



<div>
<div>
Copier après la connexion
Copier après la connexion


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!

source:php.cn
Article précédent:Comment vider un pied de page au bas de la page dans Twitter Bootstrap ? Article suivant:Comment puis-je créer un effet de panneau de verre avec des superpositions floues sur les navigateurs ?
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Derniers numéros
Rubriques connexes
Plus>
Recommandations populaires
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal