ul li を使ったリストの区切り線の一番上を表示させたくない場合の対処法

css3

リストの区切り線が枠線とカブってダサい!こんなときの対処法
cssのul liを使ってのリスト表示の際に区切り線を入れるとdiv要素なんかに囲まれた枠線とカブってしまうというときの対処法です。かなり初歩的なことですが・・・。やはり覚書で!

ul liのリスト表示の区切り線の一番上だけ非表示にしてしまう

百聞は一見にしかず!以下のような設定前の状態を設定後の状態にする方法です。

【設定前】

  • リスト1
  • リスト2
  • リスト3
  • リスト4

【設定前】

  • リスト1
  • リスト2
  • リスト3
  • リスト4

設定後のHTMLサンプル

設定後のHTMLソースサンプルです。

<div class="sample2">
<ul>
 <li>リスト1</li>
 <li>リスト2</li>
 <li>リスト3</li>
 <li>リスト4</li>
</ul>
</div>

設定後のCSSサンプル

設定後のCSSソースサンプルです。

.sample2 ul{
_zoom:1;  //重要
overflow:hidden; //重要
margin:5px;
}

.sample2 li{
margin-top:-1px; //重要
border-top:1px dotted #666666;
}

今日の選択理由

このリスト表示の方法は私は個人的に良く使います。っいうか毎回使っています。線が1本カブっているかカブっていないかだけの違いで気にならない人は気にならないとは思いますが、1pxへのこだわりといいますか、なんといいますかこのような小さなことの繰り返しがすばらしいサイトを作る秘訣なのかなと思う今日この頃です。

rss登録 rss登録 rss登録

コメント

コメントをお寄せください。

コメントの投稿

コメントフィード コメントフィード

トラックバックURL: http://select.rash.jp/css/772/trackback/