ホーム > マークアップ > CSS > リスト「画像」とナビゲーション「横」編
リスト「画像」とナビゲーション「横」編
- 公開日
- 2007年01月06日
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;)に設定変更する。
- 終了タグから開始タグまでをコメントアウトする(インライン要素として表示させたli要素の前後に改行があると、ブラウザはこれを半角スペースとして認識してしまうトラブルを回避するため)。
ただし、floatと合わせ技を使用した場合は不要(clearプロパティの確保を忘れないように)。
- この記事に関するご意見・ご感想をお待ちしております。