텍스트 크기 조정 텍스트는 다른 요소를 컨테이너에 밀어 넣지 않도록하십시오.

StackOverflow https://stackoverflow.com/questions/217741

  •  03-07-2019
  •  | 
  •  

문제

다음 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 요소가 약간 움직이고 마우스 오프 할 때 뒤로 이동하게합니다. . 이 일이 일어나지 않도록 쉬운 방법이 있습니까?

도움이 되었습니까?

해결책

누가 -1ed 지 확실하지 않지만 Mauro의 대답은 본질적으로 정확합니다. 자동 너비를 가진 아이템을 사소하게 만들 수는 없습니다. 내부의 글꼴이 대담하지 않은 경우 너비가 무엇인지에 따라 다릅니다.

그러나 '플로트 : 왼쪽;' 인라인 디스플레이 요소의 너비를 설정할 수 없으므로 규칙이 필요합니다. 그리고 'em'은 아마도 버튼의 글꼴 크기에 필요한 폭을 만들기 위해 더 나은 단위 일 것입니다.

다른 팁

항목의 굵은 폭보다 큰 목록 항목 요소에 너비를 추가하십시오.

#menu li
{
   width: 150px;
}

또는 대담한/비 노드에 의해 영향을받지 않는 모노 스페이스 글꼴을 사용해 볼 수 있습니다.

이 menutext {line-height : 10px; /* 또는 무엇이든 */ }

또한 인라인 요소의 너비를 설정하려면 디스플레이를 사용하십시오 : 인라인-블록;

float : 왼쪽은 그렇게 친절하지 않을 수 있습니다. 당신이 그것을 사용하고 그것을 엉망으로 만들면 분명하게 사용됩니다. 둘 다

방금 같은 문제가있었습니다. 내가 생각하고 지금부터 사용할 수있는 솔루션은 대신 텍스트 쉐이드를 사용하는 것입니다.

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

텍스트는 약간 흐릿 해 보일 것입니다. 세 번째 매개 변수를 0으로 설정하면 텍스트가 흐려지지 않지만 약간 더 대담하게 보입니다.

나는 이것이 너비의 텍스트를 다루는 것보다 낫다고 말하고 싶습니다.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top