更改水平描述列表<dl>上的行间距

Question

我创建了一个描述列表，其中标题和数据在同一行（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)">Marilyn.Adams@example.com</a>
        <a href="mailto:Marilyn.Adams@example.com"><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>

Answer 1

在第一个实例中导致问题的图像对齐。您可以通过赋予vertical-align middle

的img{ vertical-align:middle; } 值来解决此问题

dt

More information on vertical-align

对于间距，而不是创建新类（顺便提一下，您只应用于dd而不是后面的:nth-of-type），您可以定位要创建的项目使用dt:nth-of-type(2),dd:nth-of-type(2){ margin:0 0 20px; } 伪类下面的空格。

get ':sport_id', :to => 'products#show'

class ProductsController < ApplicationController
  def show
    render text: "sport is #{params['sport_id']}"
  end
end

More information on :nth-of-type