最近だと、スタイルシートを使って横並びにレイアウトを組むときは

「display:flex」などのフレックスボックスを使うサイトをよく見かけます。

 

ただ、レガシーブラウザの対応が追いついていないのが現状です。

ウェブサイトを制作ときにクライアントから「崩れている・・・」と言われた事がある方も少なくないと思います。

 

僕はPCでは、floatでレイアウトを組むようにしています。

ただ、横並びにしたコンテンツの中央寄せする時は「display:inline-block」を使います。

 

理由は、ソースコードの簡略化と正確に中央寄せする事ができるからです。

 

 

 

実際にソースコードを見てみましょう。

 

[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;}

 

 

 

 

隙間の調整なのに、font-sizeで対応するのは不思議ではありますが・・・。

その他にもletter-spaceで対応する方法もありますが、僕は「font-size:0;」の方法をお勧めします。