将 HTML 元素向上移动 1 行高答案

【问题标题】：Move an HTML element up exactly 1 line-height将 HTML 元素向上移动 1 行高
【发布时间】：2012-09-11 05:18:23
【问题描述】：

我有一些标记：

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

我想设置 <dd>s 与 <dt>s 一致的样式。我的文档的line-height 设置为1.3。知道ems 等于font-size 并且line-height 是font-size 的百分比，我尝试了：

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

给<dt>s 我的数据一个合理的间距。这不起作用，因为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>

【问题讨论】：

最后一点 - 这不是 URL。那是一堆标记代码。
尝试将其粘贴到 Chrome 或 Firefox 的 url 栏中（没有 NoScript）
仅仅因为你可以在你的浏览器中输入并不能使它成为一个 URL，至少我不认为它是。
@AJMansfield 你是对的 - 它是一个 URI，而不是一个 URL：en.wikipedia.org/wiki/Data_URI_scheme。
@AJMansfield：这是一个完全有效（且有效）的 URI

标签： font-size css em

【解决方案1】：

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

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

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

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

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

【讨论】：

【解决方案2】：

<ol> 似乎更适合这种情况，但您可以这样做：

dl {
    font: 200%/1.3 Arial;
    overflow: hidden;
}

dt {
    clear: both;
}

dt, dd {
   float: left;
   margin-left: 0.5em;
}

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

【讨论】：

我只是使用数字作为元语法——在我的例子中是它的标签和数据。

【解决方案3】：

position: relative;
bottom: 1.3em; /* same as line height */

See fiddle

【讨论】：

Andre，这仍然在 Chrome 中显示相同的错误，但我可以看到你想用它去哪里。 Chrome 似乎在四舍五入该值，但它会计算它。
@michaelc：嗯，好的，现在我明白问题出在哪里了。那么你应该采取马克的方法。