我创建了一个描述列表，其中标题和数据在同一行（http://jsfiddle.net/ajkuwwsc/）
我想在第二行和第三行之间添加空间（而不是我能够执行的所有行），并使EMAIL与电子邮件地址和图标对齐。
我尝试在第二行和第三行之间添加空间的尝试未成功！ （http://jsfiddle.net/ajkuwwsc/1/）。我不确定如何提取电子邮件以使其符合要求。
如何完成的？
dl {
width: 395px;
font-size:12px
}
dd, dt {
padding-top:5px;
padding-bottom:5px;
}
dt {
float:left;
padding-right: 5px;
font-weight: bolder;
}
dt {
clear: left;
}
dt, dd {
min-height:1.5em;
}
/* .more-space{padding-bottom:20px;} */
<dl>
<dt>Row 1:</dt>
<dd><a href="javascript:void(0)">Bla bla bla</a></dd>
<dt class="more-space">Row Two:</dt>
<dd><a href="javascript:void(0)" class="more-space">Bla bla bla Bla bla bla</a></dd>
<dt>Row Three (3):</dt>
<dd><a href="javascript:void(0)">Bla bla</a></dd>
<dt>EMAIL:</dt>
<dd>
<a href="javascript:void(0)">[email protected]</a>
<a href="mailto:[email protected]"><img title="Send Email" src="http://s8.postimg.org/85a36p329/messages.png" alt="Send Email"></a>
</dd>
<dt>Row 5:</dt>
<dd><a href="javascript:void(0)">Bla bla</a></dd>
<dt>Empty Row:</dt>
<dd></dd>
<dt>Row 6:</dt>
<dd><a href="javascript:void(0)">Bla</a></dd>
</dl>
最佳答案
图像的对齐首先导致了问题。您可以通过给它的vertical-align值middle来解决此问题。
img{
vertical-align:middle;
}
More information on
vertical-align对于间距，您无需使用新类（顺便说一句，您仅适用于
dt而不是紧随其后的dd），而是可以使用:nth-of-type定位要在其下方创建空间的项目伪类。dt:nth-of-type(2),dd:nth-of-type(2){
margin:0 0 20px;
}
More information on
:nth-of-type