CSS-在单独行上带有dt和dd的DL样式定义列表

Question

I am trying to style up a definition list with on top row and there corresponding dd's on sitting directly below on a seperate line

HTML

<dl>
    <dt>Term 1</dt>
    <dd>Definition 1</dd>

    <dt>Term 2</dt>
    <dd>Definition 2</dd>

    <dt>Term 3</dt>
    <dd>Definition 3</dd>
</dl>

CSS

dl {
    margin: 0;
    padding: 0 0 30px;
}
dt, dd {
    float: left;
    margin: 0;
    width: 33%;
}

I need them to sit something like below:

Answer 1

Without a containing element (which <dl> does not provide or allow for) around each <dd> and <dt> pair, and without resorting to likely-brittle absolute positioning, I think you're going to find that you'll need different markup to accomplish that layout.

It's not quite as semantically clean as your original markup, since it splits up the <dl> into three separate definition lists, but here's a working fiddle .