dlリストで右側可変
企業サイトなどでよく使う小技メモ。
少し前に、とあるきっかけで考えてみたので、今後使えそうかなと。
dl{
clear:both; /*ここはそれ以前の要素にfloatがなければいらないね*/
}
dl dt{
clear:left;
float:left;
width:100px; /*幅100pxの場合。ここは適時変更*/
margin:0 0 10px 0;/*ここは複数行になったときの下部margin調整*/
padding:0;
}
dl dd{
margin:0 0 10px 106px; /*dtとddテキストのマージンを考慮および下部margin*/
}
よって、左側ddが可変になる。
もちろん固定も可能。
dlを包括するボックス要素の幅による使い方でもよし、
そのまま使ってdl自体の幅固定してもよし。
使い方は色々。
5 Entries of this Category
TrackBack
Comments
- PostedJune 17, 2010 4:53 AM
- Autherkomacchi
- CategoryCSS
- Next
- Previous