The skies belong to everyone ! Now, let us take back our 'Shattered Skies' !

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 Comments