dlのdtとddを横並びにする

Project


HTML&CSS

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8" lang="ja">
<title>dlの横並び</title>
<style type="text/css">
<!--
body{
	background: url(p01.jpg);
	}

#box{
    margin: 120px auto;
	padding: 20px 0 0 40px;
	width: 800px;
	height: 300px;
	line-height: 2em;
	}

dl {
	font-size: 1.1em;
	font-family:
	    Arial, 
	    Helvetica, 
	    sans-serif;
	}

dt {
	float: left;
	padding-right: 20px;
	color: #999;
	}
	
dd {
	color: #966;
	}	
-->
</style>
</head>

<body>
<div id="box">
<dl>
<dt>1300年</dt>
<dd> - 教皇ボニファティウス8世が最初の「聖年」
として祝福</dd>
<dt>1300年 </dt>
<dd> -『神曲』。ダンテが人生の半ばで暗い森に
迷いむ</dd>
<dt>1300年</dt>
<dd> - ダンテの友人グイド・カヴァルカンティ
死去</dd>
<dt>1301年</dt>
<dd> - ダンテ、フィレンツェ市から追放され、
以後流浪生活を送る</dd>
<dt>1301年</dt>
<dd> - ハレー彗星の出現が観測される</dd>
<dt>1302年</dt>
<dd> - 教皇ボニファティウス8世の回勅</dd>
<dt>1302年</dt>
<dd> - カルタベロッタの和約が結ばれる。シチ
リアの晩禱事件 </dd>
</dl>
</div>
</body>
</html>