큰 글꼴 크기 오른쪽으로 이동 정렬 된 텍스트

오른쪽 정렬 텍스트의 글꼴 크기를 변경하면 이상한 동작이 발생합니다. 글꼴 크기를 줄이면 텍스트가 왼쪽으로 이동합니다. 보다 구체적으로, 가장 오른쪽 문자의 오른쪽은 나머지 문자와 함께 더 작은 글꼴로 더 멀리 있습니다.큰 글꼴 크기 오른쪽으로 이동 정렬 된 텍스트

HTML

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이 내 목표는 DT를 얻을 가까이 함께 dd는 것입니다 픽셀 2 또는 3

<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. 문제의 페이지를 볼 수 있습니다 here: dt의 너비를 줄이면 더 작은 글꼴 크기로도 줄 바꿈됩니다. 388 : 나는 OS X의 사파리와 파이어 폭스에서 어떤 도움

감사합니다, 커트

을

출처

2012-09-24 curt

당신은'dt'와'dd'를 더 가깝게 의미합니까? 귀하의 질문에. –

오류를 찾아 주셔서 감사합니다. – curt

단지 master.css 라인에 dl.date-term dd의 margin-left을 줄이려면 DT를 얻고 가깝게 DT가 없습니다 그것을 시도했습니다

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

출처

2012-09-24 07:24:51 Libin

처음에는 이해가되지 않았지만이 방법이 효과적이었습니다. 나는 dd 왼쪽 여백을 dt의 너비보다 작게 만들었다. 그들이 겹칠 것이라고 생각할 것입니다. 그런 다음 ems를 사용하여 너비, 여백 등을 지정할 때 실제 거리는 글꼴 크기에 상대적이라는 것을 기억했습니다. 따라서 글꼴 크기가 1em 인 6em 너비는 폰트 크기가 0.8em 픽셀 인 6em 너비보다 큽니다. px를 사용하면이 문제가 발생하지 않지만 더 취약합니다. – curt

줄 높이를 제거하면 문제가 해결되는 것 같습니다.

그것은/폰트 설정하기위한 기타 옵션 속기 찾고 가치가있을 수 http://css-tricks.com/snippets/css/font-shorthand/

JSFiddle 예 : 또한 등을 상대 값이 아닌 여백 톱을 사용 가치를 조사 할 수있다 http://jsfiddle.net/UAbUu/

출처

2012-09-24 07:39:04

큰 글꼴 크기 오른쪽으로 이동 정렬 된 텍스트

답변

관련 문제