0

我有一些标记：

<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>合理的间距。这不起作用，因为以像素为单位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>
4

3 回答 3

1

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

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

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

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

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

于 2012-09-18T21:49:04.900 回答
1

<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/

于 2012-09-18T21:56:50.540 回答
0 
position: relative;
bottom: 1.3em; /* same as line height */

见小提琴

于 2012-09-18T21:49:00.037 回答