如何将描述列表中的不同定义彼此相邻浮动？答案

【问题标题】：How can I float the different definitions in my description list next to each other?如何将描述列表中的不同定义彼此相邻浮动？
【发布时间】：2016-04-14 18:58:51
【问题描述】：

所以我正在尝试制作一个水平时间线。我认为创建一个定义列表 dl 以年份作为定义术语 dt 并将描述作为定义描述 dd 是最合乎逻辑的事情。

准备就绪后，应该如下所示：

Timeline design

到目前为止，这是我的 html 代码：

<dl class="timeline">
<dt>1665</dt>
<dd>The first chamber of commerce is established in Bruges. Over the following years and centuries, other chambers of commerce are established on the territory of present-day Belgium. They are private organisations, founded by local traders.</dd>                       
<dt>1791</dt>
<dd>Under French rule, the chambers of commerce and the corporations are dissolved.</dd>
<dt>1802</dt>
<dd>Napoleon reestablished the chambers of commerce.</dd>
</dl>

现在我想将所有定义彼此相邻浮动，而不必创建不同的 dl 或类似的东西。换句话说，我尝试将 dt 与他所属的 dd 一起设置样式。

有人知道这个问题的解决方法吗？

【问题讨论】：

很抱歉，如果你想使用浮点数，我会在这里使用不同的结构。您必须将每个 dt/dd 分组包装在一个单独的 div 中并浮动它们。
我会更多地考虑标准菜单结构。

标签： html css dd dt

【解决方案1】：

.line {
  float:left;
  width:100px;
  border-left:1px solid;
  padding-left:20px;
  margin-right:30px;
}
.blue {
  border-left:1px solid blue;
  color:blue;
}
.yellow {
  border-left:1px solid yellow;
  color:yellow;
}
.green {
  border-left:1px solid green;
  color:green;
}
.red {
  border-left:1px solid red;
  color:red;
}

<div class="line blue"><h1>1990</h1><p>Text</p></div>
<div class="line yellow"><h1>1990</h1><p>Text</p></div>
<div class="line green"><h1>1990</h1><p>Text</p></div>
<div class="line red"><h1>1990</h1><p>Text</p></div>

【讨论】：