「CSS」display:inlineでインライン要素扱いで横に並べる

2014年9月20日2021年10月8日

構文
display : inline
要素は自分自身の前後に改行を生成しない、一つ以上のインライン要素ボックスを生成します。
通常フローでは、次の要素は空間があれば同じ行に来ます。
インライン要素ボックスを生成します。前後に改行は入らないので横に並びます。(初期値)

使用例

<style>
/*横に並べる(inline)*/
  .cft {
    display: inline;
    background-color: skyblue
  }
</style>
<!--display:inlineでインライン要素扱い-->
<div class="cft">AA inline</div>
<div class="cft">BB inline</div>
<div class="cft">CC inline</div>
<div class="cft">DD inline</div>