html - 较大的字体大小在右对齐文本中向右移动

Question

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

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 靠得更近。可以看到问题页面here:如果我减小 dt 的宽度，它会换行，即使字体较小。我已经在 OS X 上的 Safari 和 Firefox 中试过了。

感谢您的帮助，生硬

Answer 1

要使 dt 和 dt 靠得更近，只需减少 master.css 第 388 行 dl.date-term dd 的 margin-left

dl.date-term dd {
margin-left: 5em;
}