定义列表中的文本对齐方式

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伪元素。

Answer 2

    dl {
    margin-bottom: 40px;
    border-spacing: 0;
    background:green;
}
dd {
    display: block;
    overflow: hidden;
    background:pink;
    margin: 0 0 5px;
}

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

添加这些代码

JS Fiddle Link