制作記事 Web制作マークアップCSSリスト「画像」とナビゲーション「横」編

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

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プロパティの確保を忘れないように)。