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ピクセルです私の目標は、dtとddを近づけることです。問題のページはここで見ることができます： dtの幅を小さくすると、フォントサイズを小さくしても折り返されます。OSXのSafariとFirefoxで試しました。

助けてくれてありがとう、Curt

4

2 に答える 2

0

行の高さを削除すると、問題が解決するようです。

フォント構成の省略形/その他のオプションを調べる価値があるかもしれません：http： //css-tricks.com/snippets/css/font-shorthand/

JSFiddleの例：http ：//jsfiddle.net/UAbUu/

マージントップなどの代わりに相対値を使用することも検討する価値があるかもしれません。

于 2012-09-24T07:39:04.000 に答える
0

dt と dt を近づけるには、master.css 行番号 388のmargin-leftofを減らします。dl.date-term dd

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