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

xhtmlソース
<div>
<ul><!--
--><li><img alt="navi1" /></li><!--
--><li><img alt="navi2" /></li><!--
--><li><img alt="navi3" /></li><!--
--><li><img alt="navi4" /></li><!--
--><li><img alt="navi5" /></li><!--
--></ul>
</div>

CSSソース
div{
width:○○px;
}
ul{
list-style:none;
margin:0;
padding:0;
}
li{
display:inline;
margin:0;
padding:0;
}

横並びの画像ナビゲーション作成時のポイント

• liのブロック要素をインライン要素（displya:inline;display:inline;）に設定変更する。
• 終了タグから開始タグまでをコメントアウトする（インライン要素として表示させたli要素の前後に改行があると、ブラウザはこれを半角スペースとして認識してしまうトラブルを回避するため）。

  ただし、floatと合わせ技を使用した場合は不要（clearプロパティの確保を忘れないように）。