호버 - 링크 경계 사이의 공간

Question

탐색 링크 위로 마우스를 가져 가면 호버가 배경색과 링크 색상을 변경하지만 오른쪽 테두리와 호버 채우기 사이에는 약간의 공간이 있습니다. 어떻게 호버가 테두리에 도달 할 수 있습니까? 나는 패딩 등으로 놀고 보았고 다른 요소로 경계를 옮겼지만 아무것도 작동하지 않습니다. 너무 작을 것이라고 확신합니다.

HTML

<nav id="bottomNavWrap"> 
<nav id="bottomNav" class="fl"> 
    <ul> 
     <li><a href="#">汽车首页</a></li> 
     <li><a href="#">购车必读</a></li> 
     <li><a href="#">新车导购</a></li> 
     <li><a href="#">新车排行榜</a></li> 
     <li><a href="#">最新促销</a></li> 
     <li><a href="#">维修问答</a></li> 
     <li class="last"><a href="#">车行搜索</a></li> 
    </ul> 
</nav> 

CSS

#bottomNavWrap { 
    height: 34px; 
    width: 900px; 
    margin-left: auto; 
    margin-right: auto; 
} 

#bottomNav { 
    display: inline-block; 
} 

#bottomNav ul { 
    color: #fff; 
    font-size: 120%; 
    font-weight: 500; 
    text-align: left; 
} 

#bottomNav ul li { 
    display: inline; 
} 

#bottomNav li a { 
    border-left: solid 1px #454b95; 
    width: 80px; 
    padding-bottom: 7px; 
    padding-top: 7px; 
    padding-left: 10px; 
    padding-right: 10px; 
    text-decoration: none; 
    color: #fff; 
} 

#bottomNav li a:hover { 
    color: #000; 
    background-color: #FFF; 
} 

#bottomNav li.last a { 
    border-right: solid 1px #454b95; 
} 

Answer 1

공백을 제거하는 여러 가지 방법이 있습니다. 일부는 다음과 같이 코드에서 문자 그대로 아무 공백이없는 제안 :

<ul><li>First Link</li><li>Second Link</li></ul> 

그러나,이 코더에 대한 읽기 어려운 될 수 있습니다.

이

<ul> 
    <li></li><!-- 
    --><li></li><!-- 
    --><li></li><!-- 
    --><li></li> 
</ul> 

또 다른 대안이 바로 옆에 태그 앞에 닫는 태그의 마지막 문자를 넣어하는 것입니다, 공백이 태그 안에 있도록 :

<ul> 
    <li></li 
    ><li></li 
    ><li></li 
    ><li></li> 
</ul> 

또 다른 제안과 같이 코드 틈 사이에 HTML 주석을 사용하는 것입니다

두 가지 방법이 눈보다 더 쉽지만 모든 것을 깔끔하게 보는 것을 좋아하는 코더도이 문제가 있습니다. 나는 그러한 코더 중 하나이며 다른 방법을 선호한다.

이

*{font-size:small;} 
.fl>ul{font-size:0;} 

첫 번째는 작은 문자 그대로 모든 단일 항목의 글꼴 크기 속성을 설정합니다, 두 번째는 .fl 내 <ul>의 글꼴 크기 속성을 설정합니다 :

은 당신의 CSS에 다음을 추가 클래스를 0으로 설정하지만 > 셀렉터는 ul 만 적용하고 자식 (예 : <li>)은 영향을받지 않습니다. 글꼴 크기가 0이면 페이지에 공백이 전혀 표시되지 않고 공백이 제거됩니다.

이 방법으로 원하는 방식으로 재생할 수 있지만 가장 빠른 방법입니다.