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

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

要素の幅が動的である場合、要素を水平方向に並べて配置すると問題が発生する可能性があります。このシナリオでは、2 つの要素が同じ行上で左右にフローティングされており、要素 2 の可変幅により要素 1 と位置がずれる可能性があるという問題が発生します。

HTML を変更せずにこれを解決するには、display:inline- の使用を検討してください。ブロック。この手法では、ブロックのような動作を維持しながら、要素をインライン要素として定義します。 element1 を display:inline-block および margin-right 値 10px で定義することにより、2 つの要素間に一貫した距離が作成されます。

実装:

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

#element2 {
  display: inline-block;
}

例:

<div>

このメソッド要素 2 の動的な幅に関係なく、要素 2 を要素 1 の隣に配置し、それらの間のパディングを一貫して行うことができます。

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