CSS 탐색 막대의 이미지

내 탐색 막대의 마지막 링크로 아이콘을 추가하려고합니다.CSS 탐색 막대의 이미지

이미지가 파란색 기어를 넘어 단일 픽셀을 확장하지는 않지만 전체 ul에 너무 많은 공간을 추가합니다.

여백, 채우기 및 줄 높이를 0으로 설정했지만 블록을 계속 확장하려고 시도했습니다.

탐색 모음 nav bar

CSS

ul { 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
    overflow: hidden; 
    background-color: #333; 
    font-family: sans-serif; 
} 

li { 
    float: left; 
} 

li a { 
    color: white; 
    display: block; 
    text-align: center; 
    text-decoration: none; 
    padding: 14px 16px; 
}

HTML

<ul class="menu"> 
    <li><a href="#">PRODUCTION</a></li> 
    <li><a href="#">OFFICE</a></li> 
    <li><a href="#">SALES</a></li> 
    <li><a href="#">MISC</a></li> 
    <li><a href="#">ADMIN</a></li> 
    <li><a href="#">GEAR</a></li> 
    <!--<li><a id="gear" href="#"><img src="gear.png"/></a></li> --> 
</ul>

이미지 Gear Image

출처

2016-06-20 Zach

이미지 호스트에 이미지를 게시하십시오. 나는 당신을 위해 일하는 예제에서 그것을 사용하고 싶습니다. – MassDebates

'li a {padding : 14px 16px;}에서 설정 한 패딩을 삭제 했습니까? }'? 'li a # gear {padding : 0; }'? –

쉽게 확인 이미지를 결코하지 않을 것에,이 CSS 규칙에 추가 할 수 있습니다 간다 주위의 텍스트보다 큽니다. 다음, 기어가 너무 작 으면 http://codepen.io/anon/pen/LZRaWL

: 여기

동작하는 예제가있다 : 정확한 이미지 파일없이

.menu img { 
    height:1em; 
}

, 나는 더 구체적인/우아한 해결책을 마련 할 수 패딩을 줄이고 기어 크기를 늘리십시오. 다음은 em 단위에 대한 상대 크기 조정을 활용 한 2 차 예입니다. http://codepen.io/anon/pen/gMwEmj

출처

2016-06-20 21:07:44 MassDebates

고맙습니다. 이미지를 내 소식에 추가했습니다. – Zach

답변

관련 문제