目次
display: inline-block;を指定するとあたかもinlineでの表示のように振る舞いながら、heightや上下のpaddingを指定することができてすごく便利です。
4列のデータ一覧を作りたいとき、これを使うとレイアウトが崩れてしまったので、そのメモ書き。
以下がサンプルです。4列に画像を並べたいときのHTML/CSSを想定しています。
<ul class="column-list">
<li><img src="hoge.png" alt="hoge" /></li>
<li><img src="hoge.png" alt="hoge" /></li>
<li><img src="hoge.png" alt="hoge" /></li>
<li><img src="hoge.png" alt="hoge" /></li>
<li><img src="hoge.png" alt="hoge" /></li>
<li><img src="hoge.png" alt="hoge" /></li>
<li><img src="hoge.png" alt="hoge" /></li>
</ul>.column-list {
width: 100%;
}
.column-list>li{
width: 25%; /* 100% / 4 */
padding: 10px;
display: inline-block;
}このようにHTML/CSSのとき、上手く4列になりません。
デベロッパーツールで確認すると、li同士の間に妙な隙間があるのがわかると思います。実は、半角スペースが間に入ってしまっていることが原因です。
HTMLでは連続する改行や半角スペースは１つの半角スペースとして解釈されることになっています。
そのため、
<ul class="column-list"><li><img src="hoge.png" alt="hoge" /></li><li><img src="hoge.png" alt="hoge" /></li><li><img src="hoge.png" alt="hoge" /></li><li><img src="hoge.png" alt="hoge" /></li><li><img src="hoge.png" alt="hoge" /></li><li><img src="hoge.png" alt="hoge" /></li><li><img src="hoge.png" alt="hoge" /></li>
</ul>のように改行なしで書いてしまえば、正しく表示されますが、このような書き方では、いくらなんでも可読性が低すぎます。
ちゃんとdisplay: flex;かdisplay: block;を使ってやりましょう。
.column-list {
width: 100%;
display: flex; /* ここを追記 */
}
.column-list > li {
width: 25%; /* 100% / 4 */
padding: 10px;
}.column-list {
width: 100%;
}
.column-list>li{
width: 25%; /* 100% / 4 */
padding: 10px;
float: left; /* ここを修正 */
display: block; /* ここを修正 */
}今はflexがあるので、便利ですね。