「css・定義リストのdtとddを同じ位置できれいな横並びにする［１］」の補足ページです。
［１］では、dtとddを同じ位置に横並びにするために「table-cell」を使ったサンプルを載せました。下の（３）がそれと同じサンプルです。これと同じような動きを「display:inline」を使って作成してみました。
.dlwrap1 dl {
width: 100%;
color: #3366ff;
font-size: 14px;
margin: 4px 0;
}
.dlwrap1 dl dt {
color: #777;
font-weight: bold;
}
.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;
}
.dlwrap3 dl {
display: table;
color: #3366ff;
font-size: 14px;
margin: 4px 0;
}
.dlwrap3 dl dt {
color: #777;
font-weight: bold;
display:inline;
margin: 0;
}
.dlwrap3 dl dd {
display:inline;
padding: 0;
margin: 0;
}
.dlwrap3 dl dd:nth-child(2) {
padding-left: 20px;
}
