使用DT和DD格式化表格布局

Question

有人可以解释为什么我的格式在 example 中并不是很好。我希望标题与右边的文字对齐。

HTML：

<dl>
    <dt>Address</dt>
    <dd>Test <br />
Test <br />
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;
    dd {
    display: inline;

      &:after {
        display: block;
        content: '';
      }
    }
}
dt {
    padding-left: 0;
    font-weight: bold;
    display: inline-block;
    min-width: 110px;
}

Answer 1

使用display: inline-block代替inline： http://jsfiddle.net/x2bgfbwv/ +粉红色大纲

这会修复您案件的分配。