css - DLリストを横向きにする方法

Question

次のようなリストがあります。

<dl>
    <dt>Something</dt>
    <dd><div>Div with an image</div></dd>
    <dt>Second</dt>
    <dd><div>Second Div</div></dd>
</dl>

そして、ページ上で実行すると、縦に見えるので、横に見えるようにしたい. コードは次のようになります。

Something
Div with an image
Second
Second Div

しかし、私はこのようなものが欲しい:

Something                     Second
Div with an image             Second Div

dl 要素と dt 要素の順序は、変更できないコードの一部であるため、変更できません。しかし、それらはすべてクラスまたは ID でタグ付けされているため、CSS を変更できます。

では、この構造でリストを水平に見せる方法はありますか?

Answer 1

<dl>
    <dt>Something</dt>
    <dd><div>Div with an image</div></dd>
    <dt>Second</dt>
    <dd><div>Second Div</div></dd>
</dl>

floatでcssする

dt{ float: left; }
dd{ float: right; }

Answer 2

Bootstrap を使用している他のユーザーには、このための水平方向の説明クラスがあります。

<dl class="dl-horizontal">
    <dt>Something</dt>
    <dd><div>Div with an image</div></dd>
    <dt>Second</dt>
    <dd><div>Second Div</div></dd>
</dl>

https://jsfiddle.net/rh2otd6e/

Answer 3

これにはテーブルを使用します。

または、定義リストでなければならない場合は、次を試してください。

dt {
float:left;
}
dd {
float:left;
clear:right;
}