float型横リスト

サイトのメニュー等で利用する、横方向リストです。

しばしばtableタグで作成されるのですが、今回はリストはulやolで作りましょうと言うことで、この方法を使用します。

サンプルを作成いたしましたが、この様な形になりますね。

タグの構成は下の通り。

<div class="float_list">
	<ul>
		<li>TOP</li>
		<li>Gallary</li>
		<li>Diary</li>
		<li>BBS</li>
		<li>mail</li>
		<li>Link</li>
	</ul>
	<br class="clear" />
</div>

divタグは、後々背景画像を当てたくなったとき等のための回避手段です。

スタイルシートの構成は下の通りです。

ul {
	list-style-type:none;
}
div.float_list ul > li {
	border:solid 1px #ada;
	margin:0.1em;
	padding:0.1em;
	width:6em;
	float:left;
}
br.clear {
	clear:both;
}

複数ありますが、ここでの要点は２つ

ul li {
	width:6em;
	float:left;
}

liタグにwidthとfloatを指定してしまうことです。これで横方向のリストが作成されます。