Question

我有一个简单的定义列表，格式如下：

    dl {
    margin: 0;
}

dl.interview dt {
    color: #A8A67A;
}

dl.interview dd {
    margin-left: 0;
}

.interview dt:before {
  content: 'Q. ';
}
.interview dd:before {
  content: 'A. ';
}

dt {
    margin-top: 1em
}

dd {
  font-style: italic;
    padding: 0;
}

我如何获得每对成功的问题和答案以在左右之间交替？

Answer 1

我会使用nth-of-type选择器。我调整了dl.interview dt上的边距，并在顶部（dl，dl dt，dl dd）添加了0边距。

希望这会有所帮助

dl, dl dt, dl dd {
  margin: 0;
}

dl.interview dt {
  color: #A8A67A;
}

dl.interview dd {
  /*margin-left: 0;*/
}

.interview dt:before {
  content: 'Q. ';
}

.interview dd:before {
  content: 'A. ';
}

dt {
  margin-top: 1em
}

dd {
  font-style: italic;
  padding: 0;
}

dd:nth-of-type(even){margin-left:65%;}
dt:nth-of-type(even){margin-left:65%;}

<dl class="interview">
  <dt>Coffee</dt>
  <dd>Black hot drink</dd>
  <dt>Milk</dt>
  <dd>White cold drink</dd>
</dl>

Answer 2

希望我理解您的问题。在我的示例中，我添加了

dt, dd {
    margin-top: 1em;
    float: left;
    width: 50%;
}

并删除

dd {
    margin-top: 1em;
}

我猜想，Q和A应该从同一高度开始。

在这里看看： https://codepen.io/anon/pen/gJaqKW

也可以使用flex或grid解决。只是想轻松开始；）

希望对您有帮助。

左右定义列表交替

2 个答案: