- 2008-03-05 (水) 17:26
- Menu
水平方向のリストメニューサンプル。
商用サイトのフッターメニューとしてよく使われる、リンクとリンクの間に直線が入るスタイル。
Fat Erik 5s Simple Pipe List
Listamatic: Fat Erik 5s Simple Pipe List (2008-03-06)
HTML:
CSS:
-
div#menu {
-
margin:2em auto;
-
width:80%;
-
text-align:center;
-
}
-
div#menu li {
-
display: inline;
-
padding: 0;
-
margin: 0;
-
}
-
div#menu li a {
-
padding:0 0.6em;
-
}
-
div#menu li:before { content: "| "; }
-
div#menu li:first-child:before { content: ""; }
-
-
/*for Win IE */
-
* html div#menu li {
-
border-left: 1px solid #ccc;
-
padding: 0 0.4em 0 0.4em;
-
margin: 0 0.4em 0 -0.4em;
-
}
-
-
/*hide from Mac IE\*/
-
* html div#menu { height:1%;margin-left:30%;}
-
-
* html div#menu li {
-
display: block;
-
float: left;
-
}
-
/**/
-
/*for Mac IE5*/
-
* html div#menu li:first-child { border-left: 0;}
ＩＥ用ハックが入っているものの、IE6以下ではFloat使用しているため中央に並ばない。
センター配置にしたい場合はmargin-leftなどで位置調整する必要がある。
また、xml宣言が入るとIEで若干表示が変わる。
