定義リスト(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を一セットずつ、横に3つずつ並べたい、
というケースがあったとします。
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;}
  }
}