html - 定义列表中的文本对齐

Question

我正在尝试使用定义列表来对齐我的文本。

这是一个例子:http://jsfiddle.net/x2bgfbwv/2/

我需要在红色框停止后启动粉色框。

html:

<dl>
    <dt>Address</dt>
    <dd>Test <br />
Another Test <br />
A Final Test</dd>

    <dt>Phone</dt>
    <dd>Test</dd>

    <dt>Fax</dt>
    <dd>Test</dd>

    <dt>Email</dt>
    <dd><a href="mailto:">email@testtesttesttest.org</a></dd>
</dl>

CSS:

dl {
    margin-bottom: 40px;
    border-spacing: 0;
    background:green;
}
dd {
    display: inline-block;
    background:pink;
}
dd:after {
        display: block;
        content: '';
      }


dt {
    padding-left: 0;
    font-weight: bold;
    background:red;
    min-width:110px;
    width:110px;
}

Answer 1

添加这段代码:

   dt {
      display: inline-block;
    }

    dd {
      margin-left: -4px;
  }

您也可以删除 :after 伪元素。