html - 标签行间距

Question

在阅读之前，请注意这一点。我喜欢将尖括号 <> 放在 dd、dl 和 dt 周围，但不幸的是，页面将它们读取为实际的 HTML 代码，而不是文本。请耐心等待。

我对 HTML 中的 dl、dt 和 dd 标签有疑问。我正在设计一份问卷。我在 dt 标签中有问题/标题，然后是 dd 标签之间的 HTML 表单问题(例如选择或输入)。我使用 float: left 在 dt 标签上将问题/标题 dt 对齐到相应表单 dd 旁边。这工作正常。但是，我的问题是:我想在行之间换行。这是我当前代码的近似值:每行都有一个并排对齐的 dt 和 dd 标签，使用 dt 标签上的 float 属性。

<dl>
    <dt class='list-item'>Question 1</dt>
    <dd class='list-item'> <input type='text' maxlength='3'> </dd>
    <br />
    <dt class='list-item'> Question 2</dt>
    <dd class='list-item'> 
    <select required>
    <option value='one'> choice1</option>
    <option value='two'> choice1</option>
    </select>
    </dd> 
</dl>

和 CSS

.list-item{
margin-left: 5%;
width: 45%
}
dt{
float: left;
text-align: center;
}

我的问题是:两行(每行一个问题和一个答案)没有所需的间距。我已经尝试将 margin-bottom CSS 属性添加到 dt 标签，但它只是搞砸了。有什么建议可以在两条线之间放置间距吗？感谢您的帮助。

Answer 1

你不能给每个 dt 一些最高利润吗？

.list-item {
  margin-left: 5%;
  width: 45%
}
dt {
  border: 1px solid red;
  margin-top: 1em;
}

<dl> <dt class='list-item'>Question 1</dt>

  <dd class='list-item'>
    <input type='text' maxlength='3' />
  </dd>
  
  <dt class='list-item'> Question 2</dt>
  <dd class='list-item'>
    <select required>
      <option value='one'>choice1</option>
      <option value='two'>choice1</option>
    </select>
  </dd>
  
</dl>

编辑:显然我错过了每个 dt/dd 组合应该在一行上的要求。

dl {
  overflow: hidden;
  width: 80%;
  margin: auto;
}
dt, dd {
  display: inline-block;
  vertical-align: middle;
  width: 45%;
  margin-bottom: 10px;
  background:lightblue
  
}

<dl> <dt class='list-item'>Question 1</dt>

  <dd class='list-item'>
    <input type='text' maxlength='3' />
  </dd>
  
  <dt class='list-item'> Question 2</dt>
  <dd class='list-item'>
    <select required>
      <option value='one'>choice1</option>
      <option value='two'>choice1</option>
    </select>
  </dd>
  
</dl>