CSSで定義リストdl,dt,ddを見栄えよく変えています。
質問dtと答えddの先頭にはCSSで背景画像を入れています。
HTMl
<div class="mod_qalist"> <dl> <dt><strong>質問はこちらでよろしいでしょうか?</strong></dt> <dd>はい、お答えいたします。はい、お答えいたします。はい、お答えいたします。</dd> </dl> <dl> <dt><strong>質問はこちらでよろしいでしょうか?</strong></dt> <dd>はい、お答えいたします。はい、お答えいたします。はい、お答えいたします。</dd> </dl> <dl> <dt><strong>質問はこちらでよろしいでしょうか?<br /> 改行しました。<br /> さらに改行しました。</strong></dt> <dd>はい、お答えいたします。はい、お答えいたします。はい、お答えいたします。はい、お答えいたします。はい、お答えいたします。はい、お答えいたします。はい、お答えいたします。はい、お答えいたします。はい、お答えいたします。はい、お答えいたします。はい、お答えいたします。はい、お答えいたします。はい、お答えいたします。はい、お答えいたします。はい、お答えいたします。はい、お答えいたします。はい、お答えいたします。はい、お答えいたします。</dd> </dl> <dl> <dt><strong>質問はこちらでよろしいでしょうか?</strong></dt> <dd>はい、お答えいたします。はい、お答えいたします。はい、お答えいたします。<br /> 改行しましたよ。</dd> </dl> <!-- mod_qalist_end --></div>
CSS
.mod_qalist dl{ padding:5px; border-bottom:solid 1px #819744; } .mod_qalist dt{ min-height:50px; height:auto!important; height:50px; margin:20px 0 0 0; padding:0 0 0 60px; font-weight:bold; background:transparent url('q.jpg') no-repeat top left scroll; } .mod_qalist dd{ min-height:50px; height:auto!important; height:50px; margin:10px 0 0 20px; padding:0 0 0 60px; background:transparent url('a.jpg') no-repeat top left scroll; }