2012-04-12 3 views
2

ul을 사용하는 메뉴로 웹 페이지를 만들고 있습니다. li으로 바뀝니다. 활성 페이지를 다른 페이지와 구분하고 링크 위로 마우스를 가져 가면 텍스트가 굵게 표시됩니다.굵은 글씨로 표시된 컨테이너의 너비

내가 겪고있는 문제는 텍스트가 굵게 표시되면 메뉴에서 모든 것을 푸시한다는 것입니다. (참조 : http://jsfiddle.net/tVDaf/)

가능한 해결책은 굵게 표시된 텍스트의 크기에 따라 각 메뉴 항목의 너비를 결정하는 것이지만 가능한지 (적어도 자바 스크립트를 사용하지 않고는) 모르겠다.

제안 사항?

+0

에 의해 오는이 하나를 본 적이 있기 때문에 게시하기 전에 포럼을 검색하십시오 : 당신이 여기에 자신의 의견을 투표를 도왔다 경우이 답변의

모든 크레딧은 앤드류 비타위한 이 문제에 대한 쉬운 CSS 솔루션은 없습니다. JavaScript로 간단하게 수정할 수 있습니다. – thirtydot

+1

자바 스크립트를 사용해 보았지만 여전히 좋지 않습니다. http://jsfiddle.net/thirtydot/tVDaf/1/. 굵게 표시 될 때 각 단어의 크기가 다르기 때문에 링크 사이의 거리가 다릅니다. 조언 : 다른 호버 효과를 사용하십시오. – thirtydot

+0

나는이 간단한 것을 자바 스크립트로 사용하는 것을 싫어하지만 당신이 제공 한 해결책은 충분하다. 고마워요. – sgcharlie

답변

1

세 가지 선택 사항이 있습니다.

  1. 를 사용하여 자바 스크립트
  2. 사용
0

유일한 정말 방법이 각을 설정하는 것입니다 수행 할 li 태그에 폭을 설정합니다 고정 폭 글꼴

  • : 마지막으로는 아마 당신의 최선의 방법이다 li는 일정한 넓이를 가지므로 지금은 안쪽의 앵커 너비가되도록 설정되어 있습니다. 일반적으로 앵커를 굵게 표시하는 대신 색상을 변경하는 것이 좋지 않습니다.

  • 0

    너비를 설정할 수 없다면 텍스트가 굵게 표시 될 때 너비가 변경된다는 의미입니다. 각 상태에 대해 패딩/여백을 수정하는 등의 절충을 제외하고는이를 피할 방법이 없습니다. Inline elements shifting when made bold on hover

    와 내가 많이

    관련 문제