日付のついた更新履歴をdl要素でおこなう

日付 + 更新内容といった更新履歴をdl要素で行います。

通常dl要素では、dt要素とdd要素を使用します。 dt要素に日付、dd要素に更新履歴とすると日付より更新履歴が1段下がって表示されます。

ここでは、この1段のずれをなくす方法を紹介します。

ずれをなくす方法

2005/09/19

日付のついた更新履歴をdl要素でおこなう

2005/09/20

heightの%指定で正しく100%のボックスを作成

JavaScript では 関数もオブジェクト

<dl>
<dt>2005/09/19</dt>
    <dd class="history">日付のついた更新履歴をdl要素でおこなう</dd>
<dt>2005/09/20</dt>
    <dd class="history">heightの%指定で正しく100%のボックスを作成</dd>
    <dd>JavaScript では 関数もオブジェクト</dd>
</dl>

dd {
    margin-left:5em;
}
dd.history {
    margin-top:-1.1em;
}

最初のddセレクタで日付分のマージンを取ります。 次にdt要素に対する最初のdd要素のみマイナスの上方向にマージンを指定します。

他の方法

dt要素にfloat: leftを指定する方法も考えられますが、dd要素を複数個並べると 2つ目のdd要素が少しずれます。

margin-topにマイナスを指定するのが一番無難かな？