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元素顺序，因为它是我无法修改的代码的一部分。但是所有这些都用class或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的其他人，有一个horizontal-description类：

<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

看一下这篇文章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

使用grid的解决方案。

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

Answer 5

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

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

Answer 6

我会用一张桌子。

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

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

Answer 7

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

dl {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    height: 5em;
}

dd, dt {
    flex-basis: 50%;
}

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

如何使dl列表水平

7 个答案: