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像素我的目标是让dt和dd更加接近。可以看到有问题的页面here: 如果我减小dt的宽度，即使使用较小的字体大小也会包装。我在OS X上的Safari和Firefox中尝试过它。

感谢您的帮助，简略的

Answer 1

要使dt和dt更接近，只需减少master.css行号为{38}的margin-left {/ 1}}

dl.date-term dd

Answer 2

删除行高似乎解决了我的问题。

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

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

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

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

2 个答案: