スマートフォン向けサイトで横に分割レイアウト

HTML CSS

スマートフォン向けのサイトで「横に3つ並べて配置」みたいなのをfloatでやると端末のピクセル数によって微妙な隙間が出来たりしていたので、調べた

スマートフォンサイト制作にdisplay:tableとdisplay:table-cellが便利！ ｜ Kana-Lier カナリエ

やりかたとしては display:table でくるんで、中身を display:table-cell するだけだった

メモ用に上記サイトからソースを引用

HTML部分

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

CSS部分

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