制作ブログ Web制作マークアップCSSリストとナビゲーション「横」編

リストとナビゲーション「横」編

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日追加)

Windows XP
IE7 IE6 Firefox2.x Opera9.x Netscape7.1
Mac OS 10.4
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