定義リストは、dlタグで括られた中に、dt（定義する用語や項目など）とdd（その説明文）を並べて配置した形で構成されます。普通に記述すると、dtの後で改行され、全角で3文字分の左マージンをあけて、ddが表示されます（１）。このレイアウトは見やすいとは言いがたく、場合によってはスペースを多く消費してしまうことから、dtとddを同じ位置で横に並べるレイアウトが好まれるようです（２）。
この横並びの方法は、floatを使うのが普通です。ddを複数表示する場合は、dtのwidth、またはddのmargin-leftを指定、もしくは両方を使ってきれいに並べることができます。
ところが、複数のddがあり、かつ、これを続けて表示したい場合、（２）の方法ではうまくいきません。そこでfloatのかわりにtable-cellを使います（３）。dtのwidthは10em（この場合）、ddのmargin-leftは0かごく小さくします。
注意点は、横にtable-cellを続けて並べるため、dlのwidthをoverflowすると、すべてのddでテキストが桁あふれします（４）。さらに、各ddのテキスト量が違うと、折り返しがばらばらになって汚くなってしまいますので、ddのwidthを決め、paddingを使ってcellどうしを離します。
※このページの補足→「css・定義リストのdtとddを同じ位置できれいな横並びにする［２］」
.dlwrap1 dl {
width: 100%;
color: #3366ff;
font-size: 14px;
margin: 4px 0;
}
.dlwrap1 dl dt {
color: #777;
font-weight: bold;
}
.dlwrap2 dl {
width: 100%;
color: #3366ff;
font-size: 14px;
margin: 4px 0;
}
.dlwrap2 dl dt {
float: left;
clear: left;
width: 10em;
color: #777;
font-weight: bold;
}
.dlwrap2 dl {
margin-left: 10em;
}
.dlwrap dl {
display: table;
color: #3366ff;
font-size: 14px;
margin: 4px 0;
}
.dlwrap dl dt {
display: table-cell;
width: 10em;
color: #777;
font-weight: bold;
}
.dlwrap dl dd {
display: table-cell;
}
.dlwrap5 {
display: table;
color: #3366ff;
font-size: 14px;
margin: 4px 0;
}
.dlwrap5 dl dt {
display: table-cell;
width: 10em;
color: #777;
font-weight: bold;
}
.dlwrap5 dl dd {
width: 15em;
display: table-cell;
padding-left: 20px;
}
