行之间的间距 <dt><dd> 标签

Question

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

我在HTML中的dl，dt和dd标签有问题。 我正在设计各种问卷。 我在dt标签中有问题/标题，然后在dd标签之间有HTML表单问题（例如，EG选择或输入）。 我使用浮点数将问题/标题dt对齐到相应的表格dd旁边：留在dt标签上。 一切正常。 但是，我的问题是这样的：我想在行之间换行。 这是我当前代码的近似值：每行都使用dt标签上的float属性并排对齐的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

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

演示

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