【スマートフォンサイト制作】display:tableとdisplay:table-cell

スマホサイトのコーディングは基本的にリキッドな感じで構築しなければならない

ナビゲーションメニューや横並びのバナーの数が奇数……

ぼく「くそっ！デザイナータヒねっ！タヒねっ！」

そんなときこそ、display:tableとdisplay:table-cell

ふう、これで一安心

— HTML —

<nav class="nav">
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">BLOG</a></li>
<li><a href="#">CONTACT</a></li>
</ul>
</nav>

— CSS —

.nav ul {
display: table;
table-layout: fixed;
width: 100%;
}
.nav li {
display: table-cell;
text-align: center;
}
.nav li a {
display: block;
}

参考サイトURL：http://kana-lier.com/css/smartphone_css/