4

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

<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 を変更できます。

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

4

7 に答える 7

3
<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; }
于 2012-12-14T10:08:48.247 に答える
3

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/

于 2016-01-20T03:33:07.107 に答える
-2

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

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

dt {
float:left;
}
dd {
float:left;
clear:right;
}
于 2012-12-14T12:48:39.160 に答える