CSSでdlのdtとddを横並びにする方法

定義リスト「dl」タグを使用したときに、普通はdtとddが2行に表示されます。

code

text

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

それを横並び（inline）で表示したい場合の方法を紹介します。

dtとddを横並びにするCSS

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;
}

上記だとdtのboldが外れてしまっているので、必要であればfont-weightなどで調整してください。

また、dtのwidthをそろえたい場合は、dtに対してwidthを指定してあげればOKです。

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;
}

CSS/SASSのおすすめ書籍

CSSやSCSSは基本がわかればあとはGoogle先生で調べた方が早いと思います。CSSの仕組みやSASSの使い方だけわかれば基本はOKです。

1冊ですべて身につくHTML & CSSとWebデザイン入門講座

📦

Amazon で関連書籍・ツールを検索

CSS フロントエンドデザイン

Amazonで探す →（アソシエイトリンク）