HTMLを変更せずに2つの要素を水平方向に整列させるにはどうすればよいですか?

マークアップを変更せずに 2 つの要素を同じ行に配置する

要素をスタイル設定するとき、特に幅が広い場合、要素を水平方向に配置するのが困難になることがあります。変動します。 2 つの要素「element1」と「element2」が、それぞれ左と右のフロートで同じ行に配置されているシナリオを考えてみましょう。 「element2」の幅が変化し、「element1」との位置がずれる場合に問題が発生します。

これに対処するために、CSS プロパティ display:inline-block が解決策を提供します。このプロパティを両方の要素に適用すると、インライン要素として動作しますが、ブロック要素のように配置されます。

CSS コード:

#element1 {
  display: inline-block;
  margin-right: 10px; /* Adjust the margin for desired spacing */
}

#element2 {
  display: inline-block;
}

マークアップ:

<div>

両方の要素に display:inline-block を設定すると、指定された 10px のマージンを挟んで水平方向に整列します。これにより、HTML 構造を変更することなく、幅が変わっても「element2」が「element1」と整列するようになります。

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