floatなし定義リスト横並び

• Dec 20, 2014
• Tags: css, tips

定義リストをfloatを使わず横並び。

HTML

<dl>
<dt>2014.12.20</dt>
<dd>テスト</dd>
<dt>2014.12.20</dt>
<dd>テスト</dd>
<dt>2014.12.20</dt>
<dd>テスト</dd>
</dl>

CSS

dl {
 line-height:1.5em;
}

dt {
 width: 6em;
}

dd {
 margin:-1.5em 0 10px 0;
 padding: 0 0 10px 6em;
}