css - 左右交替定义列表

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 的边距，并在顶部添加了 0 边距 (dl, dl dt, dl dd)。

希望对你有帮助

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>