inline-blockで横並びする方法【横並びにならない対処法】

「display:inline-blockで横並びってどうやるの？」

「display:inline-blockで横並びさせたいのに改行されて横並びにならない!」

display:inline-blockで横並びする方法する方法とそれがが効かない・横並びにならない原因と解決方法を4種類解説します。

inline-blockで横並びする方法

横並びする要素に「display: inline-block」を指定

inline-blockで横並びするには親要素ではなく横並びする要素自身に「display: inline-block」を指定します。

<style>
.example0{
    background: #f2f2f2;
    border: 1px solid #999;
    padding: 10px;
}
.example0 div{
    /*コレ*/display: inline-block;
    border: 1px solid #999;
    padding: 10px;
    background: #bdeaea;
    box-sizing: border-box;
}
</style>
    
<div class="example0">
    <div>inline-block</div>
    <div>inline-block</div>
    <div>inline-block</div>
    <div>inline-block</div>
    <div>inline-block</div>
</div>

display: inline-blockは親要素の幅を超えるときに要素ごと改行される特徴があります。

inline-blockは下にそろう

inline-blockの高さが異なるとき要素は下ぞろいになります。

上にそろえるには自身にvertical-align:top

上ぞろいしたければdisplay:inline-blockを指定した要素自身にvertical-align:topを指定します。

<style>
.example1{
    background: #f2f2f2;
    border: 1px solid #999;
    padding: 10px;
}
.example1 div{
    /*コレ*/vertical-align: top;
    /*コレ*/display: inline-block;
    border: 1px solid #999;
    padding: 10px;
    background: #bdeaea;
    box-sizing: border-box;
}
</style>
    
<div class="example1">
    <div>inline-<br>block</div>
    <div>inline-block</div>
    <div>inline<br>-<br>block</div>
    <div>inline-block</div>
    <div>inline-block</div>
</div>

inline-blockで横並びにならない原因と解決方法

inline-blockはクセがあるためうまく横並びにならないことがあります。inline-blockで横並びにならない原因と解決方法を4つ解説します。

【原因1】要素の後に隙間がある

下記はdisplay:inline-blockを指定した上でwidth:50%にしたものです。

ちょうど半分で横並びになるはずが横並びになっていません。

<style>
.example{
    background: #f2f2f2;
    border: 1px solid #999;
}
.example div{
    display: inline-block;
    border: 1px solid #999;
    width: 50%;
    padding: 10px;
    background: #bdeaea;
    box-sizing: border-box;
}
</style>
    
<div class="example">
    <div>inline-block</div>
    <div>inline-block</div>
</div>

display:inline-blockが指定された要素のhtmlソースが改行されているとその要素の後ろに隙間ができます。

なお、marginではないためCSS margin:0ではなくなりません。

【解決方法1】htmlソースの兄弟要素の隙間を空けない

下記のように兄弟要素を改行せずくっつけてしまうと横並びになります。

html

<div class="example">
    <div>inline-block</div><div>inline-block</div>
</div>

縦に並べたいなら下記のように改行とインデントをコメントアウトしてもOKです。

<div class="example">
    <div>inline-block</div><!--
    --><div>inline-block</div>
</div>

【解決方法2】親要素にletter-spacing: -1em

要素の後にできる1文字分の隙間は「letter-spacing: -1em」で打ち消すことができます。

<style>
.example2{
    /*コレ*/letter-spacing: -1em;
    background: #f2f2f2;
    border: 1px solid #999;
}
.example2 div{
    /*戻す*/letter-spacing: 0;
    display: inline-block;
    border: 1px solid #999;
    width: 50%;
    padding: 10px;
    background: #bdeaea;
    box-sizing: border-box;
}
</style>
    
<div class="example2">
    <div>inline-block</div>
    <div>inline-block</div>
</div>

letter-spacingは文字の間隔を調整するCSSです。

これは親要素に指定することで子孫の文字間隔に影響させます。

孫にも継承されるため、子要素にletter-spacingを指定し直す必要があります。

【解決方法3】display:flexで横並べする

そもそもdisplay:inline-blockはレイアウト調整に向いていません。

上記のhtmlをいじる方法もletter-spacing: -1emを指定する方法も、解決できるとはいえ強引であり不自然です。

display:flexはレイアウト調整に長けたCSSです。

こちらを使って横並べのレイアウトを作ることをオススメします。

【原因2】親の幅を超えている

下記は「width: 50%」と指定していますが、「padding: 10px」と「border: 1px」も指定しています。

通常paddingとborderはwidthに含まれません。

これにより2つの幅の合計が100%を超えます。

<style>
.example3{
    background: #f2f2f2;
    border: 1px solid #999;
}
.example3 div{
    display: inline-block;
    border: 1px solid #999;
    width: 50%;
    padding: 10px;
    background: #bdeaea;
}
</style>
    
<div class="example3">
    <div>inline-block</div><div>inline-block</div>
</div>

「display: inline-block」を指定している要素は親要素の幅を超えない限り横並びしますが、超えると改行されます。

よって横並びならない状態になります。

【解決方法】box-sizing: border-boxを指定

box-sizing: border-boxはwidthをpaddingとborderを含めたサイズにするCSSです。

これで「width: 50%」と指定しても親の幅を超えなくなるため横並びになります。

<style>
.example4{
    background: #f2f2f2;
    border: 1px solid #999;
}
.example4 div{
    /*コレ*/box-sizing: border-box;
    display: inline-block;
    border: 1px solid #999;
    width: 50%;
    padding: 10px;
    background: #bdeaea;
}
</style>
    
<div class="example4">
    <div>inline-block</div><div>inline-block</div>
</div>

【原因3】前後がブロック要素

inline-blockは確かに横並びしますが、それは前後の要素がinline-blockまたはインライン要素であればです。

前後がブロック要素であればその横に並ぶことはできません。

<style>
.example5{
    background: #f2f2f2;
    border: 1px solid #999;
}
.example5 div{
    border: 1px solid #999;
    width: 50%;
    padding: 10px;
    background: #bdeaea;
    box-sizing: border-box;
}
.example5 div:first-child{
    display: inline-block;
}
</style>
    
<div class="example5">
    <div>inline-block</div><div>block</div>
</div>

【解決方法】横並びさせる要素すべてをinline-blockにする

inline-blockおよびインライン要素同士が横並びします。

<style>
.example6{
    background: #f2f2f2;
    border: 1px solid #999;
}
.example6 div{
    /*コレ*/display: inline-block;
    border: 1px solid #999;
    width: 50%;
    padding: 10px;
    background: #bdeaea;
    box-sizing: border-box;
}
</style>
    
<div class="example6">
    <div>inline-block</div><div>inline-block</div>
</div>

【原因4】display:inline-blockを親に指定している

display:flexは親要素に指定し、子要素が横並びします。

これと同様にdisplay:inline-blockを親に指定しても横並びにはなりません。

【解決方法】横並びさせたい要素自身に指定

display:inline-blockは横並びさせたい要素自身に指定します。

ややこしいので注意しましょう。

【その他】ケアレスミス

CSSのスペルや記号を間違えている、優先順位が負けているなどの原因も考えられます。

下記を参考に見直してみてください。

【まとめ】inline-blockで横並び

inline-blockで横並びするには自身に「display: inline-block」を指定

inline-blockで横並びにならない原因と解決方法

【原因1】要素の後に隙間がある

htmlソースの兄弟要素の隙間を空けない

親要素にletter-spacing: -1em

【原因2】親の幅を超えている

box-sizing: border-boxを指定

【原因3】前後がブロック要素

横並びさせる要素すべてをinline-blockにする

【原因4】display:inline-blockを親に指定している

横並びさせたい要素自身に指定

以上、display:inline-blockで横並びする方法する方法とそれがが効かない・横並びにならない原因と解決方法でした。