lnline型横リスト

floatでも横方向リストが作成できますが、別の方法でも横方向リストは作成できます

こちらはこちらで利点はあるので、ちょっと紹介。

先にスタイルシートの方を出させて頂きますが

li {
	border:solid 1px #aaa;
	display:inline;
	margin:0.1em;
}

実際にこれを行うとこんな感じに出来ます。

ポイントはここ

li {
	display:inline;
}

display:inline;を利用すると横方向リストが作成できます。

float型リストではwidthを使用して、横幅を一定にしていましたが、今回の場合は、横幅が文字に合わせて出来ます。

IEだと、この場合でもwidthを指定して横幅を調整できるのですが、規格外の動作で、Mozilla、Opera等では動きませんので使わない方がよいでしょう。

inline型リストは、各リストの横幅が同じにならないので、borderで囲ってしまったりすると、ちょっと不格好になってしまいます。

しかし、幅が一定だと、それはそれで良い事もあったりします。あ、ここからはCSS2のbefore、afterセレクタを利用しますので、MozillaかOpera系列の新しいブラウザをご用意下さい。

時々、横方向メニューで見かけるのですが、各メニューを"/"や"|"等の文字で区切って表示させる人がいます。

サンプルを用意するとこんな感じですかね

ソースは次の通りになります

<table>
	<tr>
		<td>[</td>
		<td>TOP</td>
		<td>/</td>
		<td>Gallary</td>
		<td>/</td>
		<td>Diary</td>
		<td>/</td>
		<td>BBS</td>
		<td>/</td>
		<td>mail</td>
		<td>/</td>
		<td>Link</td>
		<td>]</td>
	</tr>
</table>

当然ですが、縦棒や、カギ括弧は見栄えの調整のためにあるのであって、文書としては意味のあるものではありません。

そこで、ここでリストbeforeセレクタを利用しHTMLではなく、スタイルシートで区切ります。

実際に制作するとこのようになりますね。

シートの方はこんな感じ

li {
	display:inline;
	padding:0.2em;
	margin:0;
}
li:before {
	content:"/";
	margin-right:0.4em;
}
li:first-child:before {
	content:"";
	margin:0;
}
ul:before {
	content:"[";
}
ul:after {
	content:"]";
}

IEだとbefore、after、あとfirst-childセレクタまでもが動かないので、ちょっとこれが出来ないのですが、後々に実装が進んだときは使ってみると良いかもしれません。