Home > CSS > ulにネガティブマージン

  • 2009-06-22 (月) 4:52
  • CSS

ulにネガティブマージン

ほとんどナビなんかではul要素を使用していて、記述はこんな感じになるのですが、
■html
<ul id=”nav”>
<li><a href=”">ホーム</a></li>
<li><a href=”">ページ1</a></li>
<li><a href=”">ページ2</a></li>
<li class=”lastNav”><a href=”">ページ3</a></li>
</ul>

■css
#nav {
width:495px;
}

#nav li {
float:left;
width:120px;
margin-right:5px;
}

#nav li.lastNav {
margin-right:;
}

いままでこのように、幅が決まっている場合には最後のliにclass=”lastNav”で余白を消していたのですが、
ul属性に
#nav {
width:495px;
margin-right:-5px;/*←追記*/
}

margin-rightに大してネガティブマージンをいれることで、最後のli属性にわざわざclassを指定する必要がないみたいです。
たぶんこれは初歩的な技だと思われるので、今後使用したいと思います。今まで技術さんに苦労させてきたなと思うとちょっと情けないです。
備忘録までに。。。

Comments:0

Comment Form
Remember personal info

Trackbacks:0

Trackback URL for this entry
http://design-tracks.com/study/css/ul%e3%81%ab%e3%83%8d%e3%82%ac%e3%83%86%e3%82%a3%e3%83%96%e3%83%9e%e3%83%bc%e3%82%b8%e3%83%b3/trackback/
Listed below are links to weblogs that reference
ulにネガティブマージン from 新米デザイナーの日報|design tracks

Home > CSS > ulにネガティブマージン

最近の読書本
gremz
etc
あわせて読みたいブログパーツ
無料アクセス解析
フィードメーター - 新米デザイナーの日報|design tracks
track feed
ブログランキング・にほんブログ村へ