ホームページ >ウェブフロントエンド >CSSチュートリアル >すべての項目を CSS の最も幅の広い要素と同じ幅にする方法は?

すべての項目を CSS の最も幅の広い要素と同じ幅にする方法は?

Susan Sarandon
Susan Sarandonオリジナル
2024-11-28 17:10:12607ブラウズ

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

すべての項目を最も幅の広い要素と同じ幅にする方法

このレイアウトでは、各項目は最も幅の広い要素の幅を占めるように引き伸ばされます。要素が複数の行に折り返されるシナリオでも同様です。 CSS を使用してこの効果を実現するには:

<div>


 display: inline-flex;<br> flex -direction: row;<br> justify-content: center;<br>}</p><p>.list {<br> 表示: flex;<br> flex-direction: 列;<br>}</p><p>.list-item {<br> text-transform: Capitalize;<br> 背景色: rgb( 200, 30, 40);<br> font-size: 1.3em;<br> text-align: left;<br> パディング: 10px;<br> マージン: 1px;<br> 表示: flex;<br> flex-direction: row;<br> flex-wrap: ラップ;<br> justify-content: flex-start;<br>}

<p><div> <div class="list"></p>
<pre class="brush:php;toolbar:false"><div>


<div>
<div>


以上がすべての項目を CSS の最も幅の広い要素と同じ幅にする方法は?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事:Twitter Bootstrap でフッターをページの一番下にフラッシュするにはどうすればよいですか?次の記事:Twitter Bootstrap でフッターをページの一番下にフラッシュするにはどうすればよいですか?

関連記事

続きを見る