在最后一行对齐`dt`和`dd`

Question

我有这个HTML：

<dl>
    <dt>some text</dt>
    <dd>12.45</dd>
    <dt>some larger text</dt>
    <dd>46.05</dd>
    <dt>some even larger text</dt>
    <dd>46.05</dd>
    <div style="clear:both;"></div>
</dl>

...而且这个CSS：

dl {
    width: 120px;
}
dt {
    float: left;
    clear: both;
}
dd {
    float: right;
}

它正在产生这个（我添加了一些不重要的额外样式来显示正在发生的事情）：

问题是，最后一个dd未与最后一个dt对齐。 如何使数字与文字的最后一行对齐？（第二个dt / dd很好）

Here is a jsfiddle我的困境。

编辑：非常清楚，这就是我想要的：

Answer 1

简短的呻吟

这种灵活的方法已经在CSS中存在已有15年的差距。它将被解决但是对于一个与CSS 2有关的15年前的Firefox错误，如果17年前建议的tab-stops规范已经开始实施，那么它可能已经成为可能。如果您有兴趣，请参阅以下更新以获取更多详细信息。

有限的解决方案

我发现了一些不同的方法，不使用伪元素更改标记。所有这些都有明显的缺点，但如果你能够可靠地确定dd文本的最大宽度，这可能是最好的方法：

dl {
    line-height: 1.3em;
    overflow: auto;
    width: 140px;
}

dt {
    float: left;
    width: 100%;
}

dd {
    float: right;
    margin-top: -1.3em; /* i.e. minus line-height */
}

dt:after{
    content: '';
    display: inline-block;
    width: 3.5em; /* Max width of a dd element */
}

示例：http://jsfiddle.net/Jordan/p4mMa/3/

此处，:after伪元素占用每个dt的额外空间，如果dd元素没有足够的空间，则会占用新行适合当前的结束。 （你还需要重置你的边距和填充元素，我已经把那些东西留给了简洁。）

替代

我考虑过的其他方法包括display: inline上的dt，并使用:before伪元素和display: block分隔行（WebKit doesn't like this）和相同的方法，但使用display: inline-block和width: 100%来安抚WebKit浏览器（works, but you have indelible empty lines before each dt）。

值得一提的是IE7和IE8都不存在，因为它们不支持伪元素。如果您要进行渐进式增强，只需删除条件样式表中dd元素的负边距，价格将始终显示在这些浏览器的单独行中。

---

更新（2013-04-18）：我知道这是一个陈旧的答案，但最近的Twitter对话让我想起了我认为值得一提的事情。还有另一种方法，不需要猜测dd的宽度：the little-known display: run-in本质上允许您将块级元素视为其下一个兄弟的内联内容。唯一的妥协是用{span}包裹你的dd内容;除此之外，it's a relatively elegant solution适用于大多数现代浏览器 - 甚至是IE8！

问题？ A 15-year-old Firefox bug，于1998年圣诞节前夕提交，不太可能在短期内得到解决。

这是可以理解的：run-in boxes are "horribly underspecified"，没有那么多的用例，还有更重要/有用的东西要处理。尽管如此，它似乎已经在一定程度上滑过了裂缝，我不禁想知道是否会有更多的人在可靠的支持下使用它。

---

更新（2013-11-13）：这个确切的用例在W3C于1998年12月发布的list of suggested extensions to CSS中有描述。此外，回到1997年1月，Dave Raggett撰写proposal for a tab-stops property本来可以令人钦佩地工作。可悲的是，用例和提案都没有太大的吸引力。

Answer 2

如果您不介意切换到ul / li / span，那么您的问题就不成问题了：

http://jsbin.com/acunew/3/edit#html,live

<ul>
    <li>some text <span>12.45</span></li>
    <li>some larger text <span>46.05</span></li>
    <li>some even larger text <span>46.05</span></li>
</ul>

新的HTML并不像你的那样语义，但我认为它很好。

CSS几乎相同：

ul {
    width: 120px;
    padding: 0;
    list-style: none;
    overflow: hidden;
}
li {
    clear: both;
}
span {
    float: right;
}

Answer 3

我认为Zuazua是在正确的轨道上。我会添加一些javascript来检测哪个dt的宽度大于120px。然后我会把Zuazua的课程应用到它的兄弟dd。当然，我会更改课程名称以更好地满足您的需求。

Answer 4

我认为j08691非常接近答案，你只需要使用位置相对和负边距。

http://jsfiddle.net/3UyKG/