在最后一行对齐`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很好)

这是一个解决我困境的问题.

编辑:要非常清楚,这就是我想要的:

Answer 1

短暂的呻吟

\n\n

15 年来，灵活的方法一直是 CSS 领域的一个众所周知的差距。如果不是 Firefox 15 年前与 CSS 2 相关的 bug，这个问题是可以解决的，如果tab-stops17 年前建议的规范能够付诸实践，这个问题也许是有可能实现的。如果您有兴趣，请参阅下面的更新以了解更多详细信息。

\n\n

有限的解决方案

\n\n

我发现了几种不同的方法可以通过使用伪元素来实现此目的，而无需更改标记。所有这些都有明显的缺点，但如果您能够可靠地确定最大宽度dd，这可能是最好的方法：

\n\n\n\n

dl {\n    line-height: 1.3em;\n    overflow: auto;\n    width: 140px;\n}\n\ndt {\n    float: left;\n    width: 100%;\n}\n\ndd {\n    float: right;\n    margin-top: -1.3em; /* i.e. minus line-height */\n}\n\ndt:after{\n    content: \'\';\n    display: inline-block;\n    width: 3.5em; /* Max width of a dd element */\n}\n

\n\n

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

\n\n

在这里，:after伪元素在每个中占用了额外的空间dt，如果没有足够的空间来容纳伪元素，则会导致它换行。dd适合当前元素的末尾，则会导致它换成新行。（您还需要重置元素上的边距和填充，为了简洁起见，我将这些内容省略了。）

\n\n

备择方案

\n\n

我考虑的其他方法包括display: inline在dt和 使用:before伪元素 withdisplay: block来打破行（WebKit 不喜欢这样）和相同的方法，但使用display: inline-block和width: 100%安抚 WebKit 浏览器（有效，但每个之前都有不可消除的空行dt）。

\n\n

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

\n\n\n\n

更新（2013-04-18）：我知道这是一个旧答案，但最近的 Twitter 对话让我想起了一些我认为值得一提的事情。还有另一种方法不需要猜测 的宽度dd：这种鲜为人知的display: run-in方法本质上允许您将块级元素视为其下一个同级元素的内联内容。唯一的妥协是dd用跨度包装你的内容；除此之外，这是一个相对优雅的解决方案，适用于大多数情况现代浏览器\xe2\x80\x94甚至IE8！

\n\n

问题？一个已有 15 年历史的Firefox bug于 1998 年圣诞节前夕提交，不太可能很快得到解决。

\n\n

这是可以理解的：run-in盒子“严重未指定”，没有那么多用例，并且有更重要/有用的事情需要处理。尽管如此，它似乎在一定程度上已经被忽视了，我不禁想知道如果有可靠的支持，是否会有更多的人会使用它。

\n\n\n\n

更新 (2013-11-13)：这个确切的用例在W3C 于 1998 年 12 月发布的CSS 建议扩展列表中进行了描述。此外，早在 1997 年 1 月，Dave Raggett就可行的属性撰写了提案tab-stops令人钦佩的是这里。遗憾的是，该用例和该提案都没有获得太多关注。

\n\n\n