複数の Div 要素を 1 行にインラインで表示するにはどうすればよいですか?

Div 要素をインラインで表示する

Web ページを作成するとき、複数の div 要素をそれぞれに隣接して表示したい場合があります。もう一方は同じ水平線上にあります。ただし、デフォルトでは div 要素はブロック要素です。つまり、自然に別々の行に表示されます。

インライン Div: 回避策

div 要素のインライン表示を実現するには、次の方法があります。回避策としては、デフォルトのブロックレベルのプロパティをオーバーライドする必要があります。一般的な方法の 1 つは、CSS を使用して表示プロパティを明示的にインラインに設定することです。これにより、それらはインライン要素として動作し、単一行で隣り合って表示されます。

例:

次の HTML を考えてみましょう:

<div>foo</div>
<div>bar</div>
<div>baz</div>

デフォルトでは、これらの div は垂直に積み重ねられます。これらをインラインで表示するには、次の CSS を追加します:

div {
  display: inline;
}

この変更により、望ましい結果が得られます:

foo bar baz

代替アプローチ: スパン要素を使用する

もう 1 つのアプローチは、div 要素をspan 要素に置き換えることです。スパンは本質的にインライン要素であるため、div の代わりにスパンを使用すると CSS オーバーライドの必要がなくなります。

<span>foo</span>
<span>bar</span>
<span>baz</span>

この場合、スパンはデフォルトで自動的にインライン表示されます。

以上が複数の Div 要素を 1 行にインラインで表示するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。