Android、Java、Web系、Linux、マラソン等の備忘録

2010/08/04

リスト系タグの余白を消す

0 件のコメント


表示の確認は、「動作確認を行ったりするブラウザのバージョン」を参照。

特にリストにする必要が無い個所でも、リスト系タグを使うことがあります。使われている具体例は、twitterのサイドバーにあるプロフィールの項目にも、リストと感じさせる必要が無いも関わらず、リストタグ使われていたりします。使われる理由の一つに、<li>~</li>を1つの項目として、liタグに付随するCSSで行間隔を開けたりできると思います。

要は右図のようなことをやりたいわけですが、広いスペースにリスト系タグを埋め込んでるだけだと、このリストタグがもたらす余白などは特に気にはならないかもしれませんが、画像に回り込ませるような使い方をしたり、CSSへはリストタグに対してlist-style:none;だけ記述しておいて、以下のようなHTMLを記述した場合、余白が目立ちます。

[html]<div id="content">
<div id="mariimg">
<img src="./hanagoshokaki.jpg">
</div>

<ul>
<li>
<strong>名称:</strong>花御所柿
</li>
<li>
<strong>説明:</strong>
回り込みテキスト回り込みテキスト回り込みテキスト回り込みテキスト回り込みテキスト回り込みテキスト回り込みテキスト回り込みテキスト回り込みテキスト
回り込みテキスト回り込みテキスト回り込みテキスト回り込みテキスト回り込みテキスト回り込みテキスト回り込みテキスト回り込みテキスト回り込みテキスト
</li>
</ul>
</div>[/html]


これを分かりやすく枠線などを付けて表示させると、赤丸で囲ったような、必要の無い余白ができてしまいます。これを改善するには、スタイルシートで余白を明示的に0に設定してやる必要があります。












[css]
#content {
width:300px;
border: solid 1px black;
}
* ul{
list-style:none;
margin-top:0px;
margin-left:0px;
padding-left:0px;
margin-bottom:0px;
}

* li{
list-style:none;
padding-bottom:5px;
}

#mariimg {
padding-right:5px;
float:left;
}
[/css]

0 件のコメント :

コメントを投稿