如何使 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

使用 grid 的解决方案。

dl {
    display: grid;
    grid-template-rows: auto auto;
    grid-auto-columns: 1fr;
    grid-auto-flow: column;
}

Answer 2

看看这个简短的网格版本：

dl {
    display: grid;
    grid-template-columns: 50% 50%;
}

Answer 3

看看这篇文章 http://www.alistapart.com/articles/multicolumnlists/

此解决方案也适用于 dl。

.HTML

<dl>
    <dt class="col-1">Something</dt>
    <dd class="col-1"><div>Div with an image</div></dd>
    <dt class="col-2 reset">Second</dt>
    <dd class="col-2"><div>Second Div</div></dd>
</dl>

.CSS

dt, dd {line-height: 2em;}
.col-1 {width: 48%;}
.col-2 {margin-left: 50%;}
.reset {margin-top: -4em;}

这是工作示例 http://jsfiddle.net/YNxCa/

或者您可以使用其他方法，例如绝对定位

Answer 4

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

CSS it with float

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

<</div> div class="one_answers">

对于使用 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 5

您可以使用flexbox解决此问题。缺点是您必须指定容器的高度。

dl {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    height: 5em;
}
dd, dt {
    flex-basis: 50%;
}

它的工作原理是将内容放在列中（flex-direction），并在高度超过100%（= 2 * flex-basis）时，每隔一个元素强制换行（flex-wrap）。

Answer 6

我会为此使用一个表格。

或者，如果必须定义列表，请尝试：

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