텍스트의 크기를 조절하여 컨테이너의 다른 요소를 계속 이동시키지 마십시오.

Question

나는 다음과 같은 HTML을

  <div id="menu"> 
      <ul class="horizMenu"> 
      <li id="active"><a href="#" id="current">About</a></li> 
      <li><a href="#">Archive</a></li> 
      <li><a href="#">Contact</a></li> 
      <li><a href="#">Item four</a></li> 
      <li><a href="#">Item five</a></li> 
      </ul> 
     </div> 

이 있고 CSS에서 나는 모든 것을 제외 꽤 잘 작동

.horizMenu li 
{ 
    display: inline; 
    list-style-type: none; 
    padding-right: 20px; 
} 
#menu 
{ 


    text-align:center; 
    margin-bottom:10px; 
    letter-spacing:7px; 
} 
#menu a 
{ 
    color:red; 

} 
#menu a:hover 
{ 
    color:blue; 
    font-weight:bold; 
} 

있을 때의 링크를 통해 마우스, 색상 변화가 대담하게, 어떤 내가 원하는 것이지만, 다른 모든 li 요소가 약간 움직이면서 마우스를 떼면 다시 움직입니다. 이 일을 막을 수있는 쉬운 방법이 있습니까?

Answer 1

누가 -1ed인지 확실하지 않지만 Mauro의 대답은 본질적으로 정확합니다. 내부 너비가 굵은 글꼴이 아닌 경우 너비에 따라 자동 너비가있는 항목을 쉽게 만들 수는 없습니다.

그러나 'float : left;' 인라인 표시 요소의 너비를 설정할 수 없기 때문에 규칙이 필요합니다. 그리고 'em'은 아마도 버튼의 글꼴 크기에 따라 필요한 너비를 만들기 위해 더 나은 단위가 될 것입니다.

Answer 2

항목의 굵은 글꼴 너비보다 큰 목록 항목 요소에 너비를 추가합니다. 이렇게하면 줄 바꿈을하지 않을 수 있습니다.

또는 공백/굵은 글씨가 영향을받지 않는 고정 폭 글꼴을 사용해보십시오.

Answer 3

사용해보기 menutext { 줄 크기 : 10px;/* 또는 무엇이든 */ }

또한 인라인 요소의 너비를 설정하려면 display : inline-block을 사용하십시오.

플로트 : 당신이 그것을 사용합니까하고 명확한 사용 일을 망쳐 놨 경우, 친절하지 수 있습니다 왼쪽 : 모두

Answer 4

난 그냥 같은 문제를 했어. 내가 생각한 해결책은 지금부터 텍스트 그림자를 사용하는 것입니다.

a:hover { 
    color:blue; 
    text-shadow:0px 0px 1px blue; 
} 

텍스트가 약간 흐리게 보입니다. 세 번째 매개 변수를 0으로 설정하면 텍스트가 흐리게 표시되지 않지만 조금 더 굵게 보입니다.

나는 이것이 폭 - 동적 텍스트를 다루는 것보다 낫다고 말하고 싶습니다.