dl dtの横並び 縦がずれる

Question

どなたかわかる方いましたら、よろしくお願いします。

1.beforeで作成した「あああああ」の左下に1行目のdtの「１」が表示されてしまう。ちゃんと下に表示されるようにしたい。
2.dtの部分だけフォントサイズを大きくするとddとの縦幅が合わず、縦がずれてしまう。

以下がコードになります。

<dl class="m"> <dt>1</dt><dd>あああああ</dd> <dt>2</dt><dd>いいいいい</dd> <dt>3</dt><dd>ううううう</dd> <dt>4</dt><dd>えええええ</dd> <dt>5</dt><dd>おおおおお</dd> </dl>

---

dl.m{
border:1px solid;
font-size:16px;
margin-top:5px;
}

dl.m:before{
border:1px solid;
content:"あああああ";
position:relative;
top:-12px;
background-color:red;
color:#fff;
padding:5px 10px;
}

dl.m dt{
font-size:20px;
font-weight:bold;
color:#red;
float:left;
clear:both;
width:1em;
}

---

Answer 1

htmlは弄らないとして、CSSを以下のようにしてみて、一応形になりました。

dl.m{ 
	border:1px solid; 
	font-size:16px; 
	margin-top:5px; 
}

dl.m:before{ 
	border:1px solid; 
	content:"あああああ"; 
	position:relative; 
	top:-12px; 
	background-color:red; 
	color:#fff; 
	padding:5px 10px; 
}

dl.m dt{
	font-size:20px; 
	font-weight:bold; 
	color:red; 
	clear:both; 
	width:1em; 
	display: inline;
}

dl.m dt:before {
	content: "\A" ;
	white-space: pre ;
}

dl.m dd {
    line-height: 20px;
    vertical-align: baseline;
    display: inline-block;
}

Comments

[amaranthine]

1についてしか回答していなかったので、2について追加・修正しました。