HTMLとCSSだけで、定義リスト(dt/dd)を横並びに表示するのは、結構面倒です。
定義(dd)の方が固定長である必要があったりします。
そんなこんなで、CSS2から追加された「display: table」を使ったシンプルな横並びの方法を実現してみました。
下記のコードを参照される際は、必ずコメント欄もご参照ください。
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja">
<head>
<title>Simple Definition List</title>
<style type="text/css">
dl { display: table; }
dl dt.row { display: table-row; }
dl dt { display: table-cell; padding-right: 0.4em; }
dl dd { display: table-cell; }
</style>
</head>
<body>
<dl>
<dt class="row" />
<dt>要勤務日数</dt><dd>20日</dd>
<dt class="row" />
<dt>勤務時間</dt><dd>480時間</dd>
</dl>
</body>
</html>
対応ブラウザは、IE8、Firefox3、Saferi3 です。たぶん、Opera も行けます。