호버 (hover) 동안 잘못된 html 정렬

웹 페이지에 메뉴가 있으며 마우스가 가리키는 요소 위에 몇 가지 강조를 추가하려고합니다. 마우스를 움직이기 전에 메뉴가 잘 보이며 정렬이 잘되어 있습니다. 강조를 추가하려면 작은 화살표 (또는 '>'기호)를 추가했습니다. 문제는 이제 텍스트가 오른쪽으로 2 문자 씩 이동한다는 것입니다.호버 (hover) 동안 잘못된 html 정렬

오른쪽으로 점프하는 메뉴 텍스트없이 '>'문자를 추가하고 싶습니다. 올바른 동작은 텍스트가 p 레이스에 남아 있고 화살표가 마우스로 가리킨 메뉴 항목의 왼쪽에 2 칸씩 나타납니다.

참고 내 정렬을 변경하려고 시도했지만 전체가 헛소리처럼 보입니다. text-align: left 만 올바른 정렬을 제공합니다.

#leftMenu { 
    position: absolute; 
    top:28%; 
    left:24%; 
    height: 20%; 
    width: 20%; 
    font-weight:400 
    font-size:0.5em; 
} 

#leftMenu a:hover:before { 
    content: "> "; 
}

텍스트를 오른쪽으로 이동하지 않고 화살표를 추가하려면 어떻게해야합니까?

출처

2012-02-17 codingJoe

">"이 이미 존재하며 보이지 않습니다. 이렇게하면 메뉴의 부동산을 차지하게되므로 표시 될 때 아무 것도 움직이지 않습니다. 여기에 작은 예입니다

CSS :

#leftMenu { 
    position: absolute; 
    top:28%; 
    left:24%; 
    height: 20%; 
    width: 20%; 
    font-weight:400; 
    font-size:0.5em; 
} 

.marker{ 
    visibility:hidden; 
} 

#leftMenu li:hover .marker{ 
    visibility:visible; 
} 

#leftMenu ul{ 
    list-style:none; 
}

HTML :

<div id="leftMenu"> 
    <ul> 
    <li><span class="marker">&gt;</span><a href="#">Link 1</a></li> 
    <li><span class="marker">&gt;</span><a href="#">Link 2</a></li> 
    <li><span class="marker">&gt;</span><a href="#">Link 3</a></li> 
    </ul> 
</div>

나는 나는 위의를 통해 얻을 정말 메뉴의 정확한 레이아웃을 잘하지만 생각 해요 일반적인 생각.

출처

2012-02-17 05:35:41 Zensar

왜 '>'문자와 '링크 1'사이에 줄 바꿈을 삽입합니까? 거기에 줄 바꿈을하지 못하게하려면 어떻게해야합니까? – codingJoe

화살표가 나중에 가질 수있는 너비와 정확히 일치하는 일반 입력에 대해 왼쪽 패딩을 추가하고 화살표를 선호 할 때이를 제거 할 수 있습니다.

그러나 화살표가 모든 브라우저에서 (동일한 글꼴 및 글꼴 크기로도) 동일한 너비를 가지지 않을 수 있기 때문에 이것은 상당히 혼란 스러울 수 있습니다.

다른 옵션은 화살표를 올바른 위치로 이동하기 위해 위치 지정 속성을 사용하는 것입니다. 예를 들어, position: absolute;을 사용하면 더 이상 다른 것들을 움직이지 않습니다. 그런 다음 표준 위치 (정적)가없는 다음 상위 항목 내에 절대적으로 배치됩니다.

출처

2012-02-17 05:04:34 s1lence

호버 (hover) 동안 잘못된 html 정렬

답변

관련 문제