定義リスト(dl)を、dt,ddを一セットずつフロートさせたい

%dl

%dt(1)

%dd(1)

%dt(2)

%dd(2)

%dt(3)

%dd(3)

という定義リストを

%dl

%dt(1) %dt(2) %dt(3)

%dd(1) %dd(2) %dd(3)

というように、dtとddを一セットずつ、横に３つずつ並べたい、

というケースがあったとします。

before,afterといった擬似セレクタと、floatを組み合わせ実現する方法を模索しましたが、困難でした。

しかし、どうしても効率よく自動でスタイリングしたい場合、

scssを使っているプロジェクトなら、次のように、

0,1,2,0,1,2...と変化するカウンタ変数($_counter)を用意し、

セル一個の幅($width)とこの$_counterを乗算し、

margin-leftの値を出すという構文で自動化できます。

> dl {

position: relative;

$list:name, age, address, phone, fax

$width: 200px;

$_counter: 0;

@each $item in $list {

dt.#{$item},

dt.#{$item} + dd {

position: absolute;

margin-left: $width * $_counter;

height: 1em;

}

$_counter:$_counter+1;

@if $_counter == 3 { $_counter: 0;}

}

}