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

11

解决方案使用grid.

dl {
    display: grid;
    grid-template-rows: auto auto;
    grid-auto-columns: 1fr;
    grid-auto-flow: column;
}
于 2019-11-26T13:42:31.317 回答
3 
<dl>
    <dt>Something</dt>
    <dd><div>Div with an image</div></dd>
    <dt>Second</dt>
    <dd><div>Second Div</div></dd>
</dl>

用浮动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

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

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

于 2012-12-14T13:28:43.977 回答
2

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

dl {
    display: grid;
    grid-template-columns: 50% 50%;
}
于 2021-06-24T12:52:08.077 回答
0

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

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

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

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

于 2017-10-03T08:02:31.703 回答
-2

我会为此使用一张桌子。

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

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