Question

在您阅读之前，请注意这一点。我喜欢把尖括号＆lt;＆gt;围绕dd，dl和dt，但不幸的是，页面正在将它们作为实际的HTML代码而不是文本来读取。请耐心等待。

我的HTML中的dl，dt和dd标签有问题。我正在设计各种问卷。我在dt标签中有问题/标题，然后是dd标签之间的HTML表单问题（E.G。选择或输入）。我在dt标签上使用float：left在相应的表单dd旁边对齐了问题/标题dt。这工作正常。但是，我的问题是：我想在行之间换行。这是我当前代码的近似值：每行都使用dt标记上的float属性 a dt和dd标记并排排列。

<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> </dt> <dd>标记行之间的间距

2 个答案: