我有一些标记:
<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>
最佳答案
根据我对您想实现的目标的理解,您希望每个 dt/dd 对都在同一行上吗?
这是一个有效的 jsfiddle 示例:http://jsfiddle.net/w9YQx/1/
使用 float ,清除。行高、字体大小等无关紧要。
dt {
float: left;
width: 150px;
clear: left;
text-align: right;
}
dd {
margin-left: 10px;
}
你可以随意设置宽度,这只是一个例子
关于html - 将 HTML 元素精确向上移动 1 行高,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12485548/