html - 将 HTML 元素精确向上移动 1 行高

Question

我有一些标记:

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

我想要这样的样式 <dd> s符合<dt>秒。我的文档的 line-height设置为 1.3 .知道em s 等于 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措施15.6px .根据http://www.brunildo.org/test/line-height-approx.html ，不同的浏览器以不同的方式计算行高的确切像素值 - 我在 Chrome 中开发，很幸运被它捕获了。

出于这个问题的目的，我想避免像素 - 指定 line-height , 和 margin-top以像素为单位可以工作，但调整大小会很差。

这是显示问题的 uri:

data:text/html,<style>body { line-height: 1.3; font-size: 75%; } dd { margin-top: -1.3em; margin-left: 1em; }</style><dl><dt>1</dt><dd>One</dd><dt>2</dt><dd>Two</dd><dt>3</dt><dd>Three</dd></dl>

Answer 1

根据我对您想实现的目标的理解，您希望每个 dt/dd 对都在同一行上吗？

这是一个有效的 jsfiddle 示例:http://jsfiddle.net/w9YQx/1/

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

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

你可以随意设置宽度，这只是一个例子