1

当我更改右对齐文本的字体大小时，我遇到了奇怪的行为。当我降低字体大小时，文本向左移动。更具体地说，最右边字符的右侧与其余字符一起以较小的字体向左更远。

HTML

<dl class="date-term">
<dt>24 Sep 2012</dt>
<dd>Lots of thinking and reading about writing this weekend, but no doing.</dd>
</dl>

CSS

p , dd
{
font-size: 1.125em;
line-height: 1.375em;
margin: 1.375em 0 1.375em 0;
color: inherit;
}
dl.date-term dt
{
float: left;
width: 5.8em;
margin-top: 0.250em;
text-align: right;
font-size: 0.8em;   /* de-emphasize */
color: #7e8b8c;     /* Make it more subdued */
}
dl.date-term dd
{
margin-left: 6.0em; /* .5em greater then width of dt above */
}

.2em 是 2 或 3 px 我的目标是让 dt 和 dd 靠得更近。有问题的页面可以在这里看到： 如果我减小 dt 的宽度，即使字体较小，它也会换行。我已经在 OS X 上的 Safari 和 Firefox 中尝试过。

感谢您的帮助，柯特

4

2 回答 2

0

要使 dt 和 dt 更接近，只需减少margin-leftmaster.cssdl.date-term dd行号：388 上的

dl.date-term dd {
margin-left: 5em;
}
于 2012-09-24T07:24:51.700 回答
0

删除 line-height 似乎为我解决了这个问题。

可能值得研究字体配置的速记/其他选项：http: //css-tricks.com/snippets/css/font-shorthand/

JSFiddle 示例：http: //jsfiddle.net/UAbUu/

也可能值得研究使用相对值而不是 margin-top 等。

于 2012-09-24T07:39:04.000 回答