display:table-cellで横並び

• Feb 6, 2015
• Tags: css, tips

floatと違い、均等幅で配置できるのでスマホサイトの可変デザインに適してます。
IE8以降で使用可です。

親要素に「display:table;」子要素に「display:table-cell」を指定。
親要素に「table-layout:fixed;」で均等幅になります。

HTML

<nav id="glNav">
<ul>
<li>ナビ1</li>
<li>ナビ2</li>
<li>ナビ3</li>
<li>ナビ4</li>
</ul>
</nav>

CSS

#glNav ul {display:table; table-layout:fixed; width:100%;}
#glNav ul li {display:table-cell; text-align:center; vertical-align:middle;}