Question

所以我想制作一个水平时间轴。我认为用定义术语dt创建一个defenition list dl和定义描述dd的描述是最合乎逻辑的事情。

准备好后，它应该如下所示：

这是我到目前为止的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组合在一起。

有谁知道这个问题的解决方案？

Answer 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>

如何将我的描述列表中的不同定义浮动到彼此旁边？

1 个答案: