将 HTML 元素向上移动 1 行高度

Question

我有一些标记：

<dl><dt>1</dt><dd>One</dd><dt>2</dt><dd>Two</dd><dt>3</dt><dd>Three</dd></dl>

我希望将

<dd>

与

<dt>

对齐。我的文档的

line-height

设置为

1.3

。知道

em

等于

font-size

并且

line-height

是

font-size

的百分比，我尝试：

body { line-height: 1.3; font-size: 75%; }
dd { margin-top: -1.3em; margin-left: 10em; }

为我的数据提供合理的间距。这不起作用，因为以像素为单位，

<dt>

测量了

line-height

，但

15px

测量了

1.3em

。根据

http://www.brunildo.org/test/line-height-approx.html

，不同的浏览器以不同的方式计算行高的精确像素值 - 我正在 Chrome 中开发，很幸运被抓住靠它。 出于这个问题的目的，我想避免像素 - 以像素为单位指定

15.6px

和

line-height

可以，但调整大小效果不佳。这是显示问题的片段：

margin-top

body { line-height: 1.3; font-size: 125%; }
dd { margin-top: -1.3em; margin-left: 1em; }

Answer 1

这是一个有效的 jsfiddle 示例：

http://jsfiddle.net/w9YQx/1/

使用浮子，并清除。行高、字体大小等无关紧要。

<dl>
  <dt>1</dt><dd>One</dd>
  <dt>2</dt><dd>Two</dd>
  <dt>3</dt><dd>Three</dd>
</dl>

您可以将宽度设置为任何您想要的，这只是一个示例

Answer 2

dt {
    float: left;
    width: 150px;
    clear: left;
    text-align: right;
}
dd {
    margin-left: 10px;
}
​

似乎更适合这种情况，但你可以这样做：

<ol>

http://jsfiddle.net/MgBvV/1/

Answer 3

看小提琴