- 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を指定する必要がないみたいです。
たぶんこれは初歩的な技だと思われるので、今後使用したいと思います。今まで技術さんに苦労させてきたなと思うとちょっと情けないです。
備忘録までに。。。
- Newer: 日本文学を知る番組「Jブンガク」
- Older: RIP SLYMEに久々はまりました。
Comments:0
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

