How to Arrange dt and dd Side-by-Side in a dl with CSS

When using the definition list (`<dl>`) tag, `dt` and `dd` elements typically display on separate lines.

Code

text

<dl>
    <dt>name</dt>
    <dd>xxxxxxxxxxxx</dd>
    <dt>mail</dt>
    <dd>xxxxxxxxxxxx</dd>
    <dt>tel</dt>
    <dd>xxxxxxxxxxxx</dd>
</dl>

Here's how to display them side-by-side (inline).

CSS TO ARRANGE DT AND DD SIDE-BY-SIDE

Code

css

// html
<dl class="dl-inline">
    <dt>name</dt>
    <dd>xxxxxxxxxxxx</dd>
    <dt>mail</dt>
    <dd>xxxxxxxxxxxx</dd>
    <dt>tel</dt>
    <dd>xxxxxxxxxxxx</dd>
</dl>

// CSS
.dl-inline dt {
  float: left;
  clear: left;
  margin-right: 10px;
}
.dl-inline dd {
  margin-left: 0px;
}

The above CSS removes the default bold styling from `dt` elements. Please adjust with `font-weight` or similar properties if needed.

If you want to align the widths of `dt` elements, simply specify a `width` for `dt`.

Code

css

// html
<dl class="dl-inline same-width">
    <dt>name</dt>
    <dd>xxxxxxxxxxxx</dd>
    <dt>mail</dt>
    <dd>xxxxxxxxxxxx</dd>
    <dt>tel</dt>
    <dd>xxxxxxxxxxxx</dd>
</dl>
// CSS
.dl-inline dt {
    float: left;
    clear: left;
    margin-right: 10px;
}
.dl-inline dd {
    margin-left: 0px;
}
.dl-inline.same-width dt {
    width: 120px;
}

RECOMMENDED CSS/SASS BOOKS

Once you understand the basics of CSS and SCSS, it's often quicker to look things up with Google. Knowing the fundamental mechanisms of CSS and how to use SASS is usually sufficient.

HTML & CSS and Web Design Introduction Course: Learn Everything in One Book

📦

Search Amazon US for related books and tools

CSS frontend design book

Search Amazon US → (affiliate link). As an Amazon Associate, we earn from qualifying purchases.