여백 때문에 테두리가 너무 넓음

내 HTML에서 탐색 모음으로 정렬되지 않은 목록이 있습니다. li 요소에서 마우스를 가져갈 때 위쪽 테두리가 나타나길 원했습니다. 그러나 연속 요소 사이에 간격을두기 위해 여백 또는 패딩을 추가하면 테두리가 너무 넓습니다. html로 공백을 추가하고 싶지 않습니다. 다른 방법이 있습니까? 내가 정의 된 너비와 빈 div 퍼팅했지만 작동하지 않았다. 내가 얻을 수있는 최선의 결과는 텍스트 장식 겹쳐서 였지만, 불행히도 나는 검은 색과 다른 색이 필요합니다.여백 때문에 테두리가 너무 넓음

LI 
{ 
display: inline; 
font-family: Arial; 
font-size: 16px; 
font-weight: bold; 
text-transform: uppercase; 
letter-spacing: 0.2em; 
padding-left: 30px; 
} 
LI:hover 
{ 
border-top: 1px solid #000000; 
}

및 HTML

<ul> 
      <a href="#"><li>link 1</li></a> 
      <a href="#"><li>link 2</li></a> 
      <a href="#"><li>link 3</li></a> 
      <a href="#"><li>link 4</li></a> 
</ul>

출처

2013-06-26 user2525842

당신의 HTML과 CSS를 게시하시기 바랍니다. – j08691

목록 안의 모든 요소를 플로팅하여 블록으로 표시하는 것이 좋습니다. 인라인 목록은 때때로 해독하기가 어렵지만 코드를 게시하십시오. 그것을 보자. – ProfileTwist

나는 나의 코드를 추가했다. 어쩌면 좀 더 쉬운 해결책을 볼지도 모른다. – user2525842

패딩이 요소의 폭을 확장합니다. Box Model에 대한 자세한 내용을 읽어보십시오.

은 더 나은 귀하의 케이스에 맞게 내 코드를 조정 :

HTML :

<ul> 
    <a href="#"><li>link 1</li></a> 
    <a href="#"><li>link 2</li></a> 
    <a href="#"><li>link 3</li></a> 
    <a href="#"><li>link 4</li></a> 
</ul>

CSS :

ul a { 
    text-decoration: none !important; //Removes default underline form link 
} 

li { 
    display: inline; 
    font-family: Arial; 
    font-size: 16px; 
    font-weight: bold; 
    text-transform: uppercase; 
    letter-spacing: 0.2em; 
    padding-left: 0.2em; // Letter spacing is making borders to extend slightly more on the right. This makes borders extend similarly on the left 
    padding-top: 2px; //To push top border slightly higher, so that top and bottom is the same distance from your text 
    margin-left: 30px; 
    text-align: center; 
    border-top: 1px solid transparent; //Stops navigation from extending on :hover 
} 

li:hover { 
    border-top: 1px solid #000; //border top on :hover 
}

FiddleJS : http://jsfiddle.net/kGN69/2/

출처

2013-06-26 22:51:54 Ninetou

고마워요! 그것은 내가 필요한 것입니다. 그러나 더 잘 이해하기 위해서 - 먼저 투명 테두리를 만드는 것이 왜 필요합니까? 호버의 폭에 어떤 영향을 줍니까? – user2525842

항목의 너비에는 영향을 미치지 않지만, 마우스를 올리면 상태를 그리는 것이 좋습니다. 이 투명 테두리가 없다면 브라우저는 호버링 할 때 1 픽셀 (테두리 두께)만큼 항목을 아래로 밀면됩니다. 왜냐하면 주어진 요소 위에 여분의 공간을 할당해야하기 때문입니다. 'display'를'inline'으로 선언했기 때문에'inline-block'이나'block'에 선언했거나 측면에 테두리를 추가하기로 결정했기 때문에 코드에 아무런 영향을 미치지 않습니다. 투명 테두리가없는 라이브 예제 : http://jsfiddle.net/kGN69/5/ vs http://jsfiddle.net/kGN69/6/ – Ninetou

가 대신 마진을 사용하는 대신 패딩을 사용해보십시오 : 여기에 내 코드입니다.

코딩 내용을 볼 수 있습니까? 그것은 훨씬 쉬울 것입니다.

먼저 Li 호버를 편집하고 있습니까?

예 :

는

#yourdiv li a:hover{ 
..... 
}

당신이 경우이 변경보십시오.

예 : 마진이 후 요소 전에 빈 공간을 만드는 동안

#yourdiv{ 
... 
padding-top:5px; 
padding-bottom:5px; 
padding-right:5px; 
padding-left:5px; 
}

출처

2013-06-26 21:47:16

여백 때문에 테두리가 너무 넓음

답변

관련 문제