ホームページ >ウェブフロントエンド >CSSチュートリアル >DIV 要素を垂直ではなく水平に表示するにはどうすればよいですか?

DIV 要素を垂直ではなく水平に表示するにはどうすればよいですか?

Linda Hamilton
Linda Hamiltonオリジナル
2024-12-10 22:53:09307ブラウズ

How Can I Display DIV Elements Horizontally Instead of Vertically?

DIV 要素のインライン表示

提供されている HTML コードは、DIV 要素を上下に積み重ねて表示します。ただし、望ましい結果は、これらの DIV がインラインで水平方向に整列して表示されることです。

提供された HTML:

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

これらの DIV は、「foo」を含む 3 つの別々の行として表示されます。 1 行目に「bar」、3 行目に「baz」を入力します。

これらの DIV をインラインで表示するには、代わりに SPAN 要素を使用することをお勧めします。デフォルトでは、SPAN 要素はインラインで表示されます。つまり、水平に整列します。変更されたコードは次のようになります。

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

これで、レンダリングされると、「foo」、「bar」、および「baz」が同じ行に並んで表示されます。

インライン DIV は標準ではないため、予期しない動作を引き起こす可能性があることに注意することが重要です。ほとんどの場合、代わりにインライン表示に SPAN 要素を使用することがベスト プラクティスです。

以上がDIV 要素を垂直ではなく水平に表示するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。