ul、liタグで横並びのメニューにする

リストタグでヘッダーメニューにするのはもう何年も前から使われている手法だけど、
なんでもtableコーディングで済ませていた時代を過ごしていた僕には、すぐ忘れるテクニックだったので、
いい加減覚えるために記事にした。

HTML

<ul>
  <li>トップ</li>
  <li>プロフィール</li>
  <li>実績</li>
  <li>連絡先</li>
</ul>

CSS

body {
	padding: 0px;
	margin: 0px;
}
ul {
	background-color: #B1B1B1;
	font-size: 0px;
}
ul li {
	display: inline-block;
	width: 25%;
	text-align: center;
	font-size: 14px;
}

display: inline-block;で横並びになる。
例では横幅を25%にすると、4つめの項目が下にずれる。inline-blockだとliの間にスペースができるため。
そのため、ulで一度font-sizeを0pxにしてliでサイズを定義しなおす。

参考:http://delaymania.com/201404/web/list-inline-block/


コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です