最近だと、スタイルシートを使って横並びにレイアウトを組むときは
「display:flex」などのフレックスボックスを使うサイトをよく見かけます。
ただ、レガシーブラウザの対応が追いついていないのが現状です。
ウェブサイトを制作ときにクライアントから「崩れている・・・」と言われた事がある方も少なくないと思います。
僕はPCでは、floatでレイアウトを組むようにしています。
ただ、横並びにしたコンテンツの中央寄せする時は「display:inline-block」を使います。
理由は、ソースコードの簡略化と正確に中央寄せする事ができるからです。
- ボックス1
- ボックス2
- ボックス3
- ボックス4
実際にソースコードを見てみましょう。
[html]
<div class="wrap">
<ul id="ul-1">
<li>ボックス1</li>
<li>ボックス2</li>
<li>ボックス3</li>
<li>ボックス4</li>
</ul>
</div>
[css]
.wrap{background:#eeeeee;padding:20px;width:100%;box-sizing:border-box;}
#ul-1{text-align:center;font-size:0;}
#ul-1 li{display:inline-block;margin:0;background:LightSkyBlue;padding:10px;border-right:1px solid DarkCyan;}
liのプロパティに「margin:0;」を指定しているのにli同士に隙間が空いてるのが気になります。
この場合は隙間が空いている要素の親要素に「font-size:0;」を指定すると解決です。
では、並べたい要素の親要素にに対して「font-size:0;」を指定して見ましょう。
[html]
<div class="wrap">
<ul id="ul-2">
<li>ボックス1</li>
<li>ボックス2</li>
<li>ボックス3</li>
<li>ボックス4</li>
</ul>
</div>
[css]
.wrap{background:#eeeeee;padding:20px;width:100%;box-sizing:border-box;}
#ul-2{text-align:center;font-size:0;}
#ul-2 li{display:inline-block;margin:0;background:LightSkyBlue;padding:10px;border-right:1px solid DarkCyan;}
- ボックス1
- ボックス2
- ボックス3
- ボックス4
隙間の調整なのに、font-sizeで対応するのは不思議ではありますが・・・。
その他にもletter-spaceで対応する方法もありますが、僕は「font-size:0;」の方法をお勧めします。