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

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

Susan Sarandon
リリース: 2024-11-28 17:10:12
オリジナル
589 人が閲覧しました

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>
<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>
ログイン後にコピー
ログイン後にコピー


<div>
<div>
ログイン後にコピー
ログイン後にコピー


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

ソース:php.cn
前の記事:Twitter Bootstrap でフッターをページの一番下にフラッシュするにはどうすればよいですか? 次の記事:ブラウザ間でぼやけたオーバーレイを含むガラス パネル効果を作成するにはどうすればよいですか?
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート