xhtmlソース
<div>
<ul>
<li>navi1</li>
<li>navi2</li>
<li>navi3</li>
<li>navi4</li>
<li>navi5</li>
</ul>
</div>
CSSソース
div{
width:○○px;
}
ul{
list-style:none;
margin:0;
padding:0;
height:△△px;
overflow:hidden;
}
li{
float:left;
width:□□px;
margin:0;
padding:0;
}
a{
display:block;
width:100%;
}
横並びのリストを作成するポイント
- divにwidthを設定する(自動折り返しを排除するための設定であるため)。
あえてリキッドにするには逆にwidthの設定は不要。
- ulにheightとoverflowを設定する(はみ出した内容を隠すことでレイアウト崩れを防ぐ場合)。
- liにwidthを設定する(MacIE5対策)。
この記事の動作確認環境(2007年12月15日追加)
IE7 | IE6 | Firefox2.x | Opera9.x | Netscape7.1 |
---|---|---|---|---|
○ | ○ | ○ | ○ | ○ |
Safari3 | IE5.2 | Firefox2.x | Opera9.x | Netscape7.1 |
---|---|---|---|---|
○ | ○ | ○ | ○ | ○ |
xml宣言
- バージョン
- 1.0
html宣言
- バージョン
- xhtml1.0 strict
- 公開識別子
- -//W3C//DTD XHTML 1.0 Strict//EN
- システム識別子
- http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd