div要素を改行させない

スポンサーリンク

以下のエントリでも書きましたがdiv要素は自動的に改行が入ります。しかし改行させずに表示したい場合はどうするのかという方法です。
p要素、div要素、span要素の違い - TASK NOTES

通常通り書くと改行されます。

<div style="color: red;">divその1</div>
<div style="color: green;">divその2</div>
<div style="color: blue;">divその3</div>
divその1
divその2
divその3


これを改行せずに表示したい場合はstyleを追加します。

<div style="color: red; display: inline-block; _display: inline;">divその1</div>
<div style="color: green; display: inline-block; _display: inline;">divその2</div>
<div style="color: blue; display: inline-block; _display: inline;">divその3</div>
divその1
divその2
divその3


これで改行されません。display、_displayと2つあるのは、IE系とMozila系に対応するためのようです。