HTML を変更せずに要素を水平に配置するにはどうすればよいですか?

HTML を変更せずに要素を同じ行に配置する

CSS フロートを使用して 2 つの要素を並べて配置しようとすると、困難になります要素の幅が異なる場合でも正確な位置合わせを保証します。 HTML 構造を変更できない場合は、要素を同じ行に揃える CSS テクニックがあります。

解決策は、display:inline-block プロパティを利用することです。方法は次のとおりです:

#element1 {display:inline-block;margin-right:10px;} 
#element2 {display:inline-block;}

この CSS は、両方の要素をインライン ブロックとして表示するように設定し、テキストのように並べて配置できるようにします。 #element1 の margin-right プロパティは、要素間に必要な間隔を作成します。

たとえば、#element1 に「要素 1 マークアップ」が含まれ、#element2 に「要素 2 マークアップ」が含まれる場合、上記の CSS は次のようになります。以下:

<div><p>この手法により、幅が変化しても両方の要素が水平に整列し、均一な整列が得られます。体験してください。</p></div>

以上がHTML を変更せずに要素を水平に配置するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。