CSS display:inlineでdivブロック要素を横に並べる

2023年2月28日

環境
Google Chrome　109.0.5414.120
Windows 10 Home 64bit

構文
display: inline;
div要素を横に並べます。インライン要素ボックスを生成します。
前後に改行は入らないので横に並びます。(初期値)
注意点としては、widthプロパティとheightプロパティで幅と高さを指定できません。

使用例

<!DOCTYPE html>
<html>
<head>
<style>
  .cft {
    display: inline;
    background-color: lightblue;
  }
</style>
</head>
<body>
<div class="cft">tokyo</div>
<div class="cft">oosaka</div>
<div class="cft">fukuoka</div>
</body>
</html>

実行結果
divタグ「cft」はブロック要素のタグですがdisplay:inlineで
インライン要素扱いで横に並びます。

CSS

Posted by arkgame

関連投稿: