リスト(ul/li)の修正

ナビメニューなどでは、リスト(ul/li)を使い、floatで横並びに表示する方法がよく用いられますが、スマートフォン用のスタイルシートでは、「display:table」を使い、リストをテーブル化してしまいます。こうすることで、positionタグを駆使しなくても、簡単に高さを中央に配置したり、幅を均等にすることができます。

スマホ用にテーブル化したナビメニューリスト

【HTML】

<nav>
<ul>
<li>ホーム</li>
<li>当サイトについて</li>
<li>メインコンテンツ</li>
</ul>
</nav>

【CSS】

nav ul {
	width:100%;
	display:table;
}

nav li {
	text-align:center;
	display: table-cell;
	vertical-align: middle;
}
スポンサードリンク