<dt><dd> 标签行间距

Question

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

HTML 中的 dl、dt 和 dd 标签有问题。我正在设计一份问卷。我在 dt 标签中有 question/caption，然后在 dd 标签之间有 HTML 表单问题（例如 select 或输入）。我使用 float: left 在 dt 标签上将 question/caption 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>

Answer 2

我认为这可能对您有所帮助：

DEMO

.list-item {
    margin-left: 5%;
    width: 45%
}
dt,dd{
display:table-cell;
margin:0px 5px;
}
dt{
float: left;
text-align: center;
border:1px solid #333; /*Remove this it's just for checking space it leaves */ 
}

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

<dt><dd> 标签行间距

Spacing between lines of <dt><dd> tags

html

css

forms

css-float