定義リストdl,dt,ddで日付とタイトルを横並びにした新着リストを作る。

定義リストを使ってCSSで日付とタイトルを横並びにしてリストで表示します。

日付の先頭に画像マーカーもいれています。
2012.1.3 改訂

HTMl

<div class="mod_newslist">
<dl>
<dt><strong>2011年02月24日</strong></dt>
<dd><a href="#">記事のタイトルや詳細がはいります。</a></dd>
<dt><strong>2011年02月24日</strong></dt>
<dd><a href="#">記事のタイトルや詳細がはいります。<br />
改行しました。</a></dd>
<dt><strong>2011年02月24日</strong></dt>
<dd><a href="#">記事のタイトルや詳細がはいります。</a></dd>
<dt><strong>2011年02月24日</strong></dt>
<dd><a href="#">記事のタイトルや詳細がはいります。</a></dd>
<dt><strong>2011年02月24日</strong></dt>
<dd><a href="#">記事のタイトルや詳細がはいります。</a></dd>
</dl>
<!-- mod_newslist_end --></div>

CSS

.mod_newslist{
	width:600px;
}
.mod_newslist dl{
}
.mod_newslist dt{
	width:120px;
	float:left;
	min-height:12px;
	height:auto!important;
	height:12px;
	padding:0 0 0 17px;
	background:transparent url('icon.gif') no-repeat 0em 0.3em scroll;
}
.mod_newslist dd{
	padding:0 0 0 137px;
	margin:0 0 10px 0;
	border-bottom:dashed 1px #ACD211;
}
.mod_newslist dd a:link    {color:#000;}
.mod_newslist dd a:visited {color:#000;}
.mod_newslist dd a:hover   {text-decoration:none; color:#FFF; background-color:#ACD211;}
.mod_newslist dd a:active  {text-decoration:none; color:#FFF; background-color:#ACD211;}