More than 5 years have passed since last update.

「diaplay inline-block+幅を％指定」で均等横並びにしても最後の要素が改行されてしまう問題

Posted at 2020-03-02

はじめに

「diaplay inline-block+幅を％指定」で均等横並びをする際、
最後の要素だけ改行されてしまい困った経験をしたので、自分への備忘録も兼ねて、
だれかの参考になればと思い書かせていただきます。

まずは、問題の状況を確認します。

index.html

<div class="content1">content1</div>
<div class="content2">content2</div>

style.css

div{
    display: inline-block;
    width: 50%;
}
.content1{
     background: blue;
}
.content2{
     background: red;
}

上記のコードをブラウザで開くと、下記の画像のように縦並びになってしまいます。

ちなみに、divタグをwidth: 49%;にすると、下記画像のように横並びになりますが、隙間が空いてしまいます。

幅いっぱいに要素を並べるにはどうすればよいのでしょうか。

原因は、ソースコード上でdivタグを改行して記述していたからでした。

index.html

<div class="content1">content1</div>
<div class="content2">content2</div>　/* ここを改行しているのが原因 */

下記のようにdivタグを改行せずに記述し、ブラウザで確認してみると、

<div class="content1">content1</div><div class="content2">content2</div>

ちゃんと幅いっぱいに均等横並びができました。

html上の改行は、半角スペース一つ分として認識されてしまうからです。
それぞれのdivタブはちゃんと50%ずつの幅になっていますが、2つのdivタブの間に半角スペースが入ってしまい、画面全体の幅を超えてしまったため、最後の要素が改行されてしまうというのが、今回の問題の正体でした。

意外とめっちゃ基本的なことが原因でした。。
まだまだ勉強が足りないことを実感した経験でした。

ソースコード上で改行せずに記述すると、問題は解決できましたが、可読性悪いですよね。

<div class="content1">content1</div><div class="content2">content2</div>

可読性を良く、半角スペースが入らない解決方法をまとめてみます。

<div class="content1">content1</div
><div class="content2">content2</div>


<div class="content1">content1</div><!-- 
--><div class="content2">content2</div>

少しは読みやすくなったのではないでしょうか。

今回は、2個の要素の均等横並びを前提にお話ししましたが、要素の個数が増える場合は、次のように幅指定してあげると、均等横並びができるようです。