내 목록 이미지 주위의 가로 간격을 어떻게 제거합니까?

Question

my website에는 화면 상단에 목록 형식 메뉴가 있습니다. 나는이 메뉴의 중앙에 내 회사 로고의 작은 버전을 배치하고자하는, 그래서 난 그냥 test page에 또 다른 목록 항목을 추가 :

<nav id="main-navigation" data-content-field="navigation-mainNav"> 
    <ul class="cf"> 
      <li class=""> 
       <a href="/">Home</a></li> 
      <li class=""> 
       <a href="/music/">Music</a></li> 
      <li class=""> 
       <img src="/assets/img/glutenfreeradio.png" style="width:20%;height:20%;" /></li> 
      <li class=""> 
       <a href="/reviews/">Reviews</a></li> 
      <li class=""> 
       <a href="/contact/">Contact</a></li> 
    </ul> 
</nav> 

문제는 당신이 확인하여 볼 ​​수 있다는 것입니다

위의 링크는 목록 이미지의 왼쪽과 오른쪽에 약간의 추가 공간이 추가되었습니다. 나는 그것을 원하지 않는다. 나는 CSS를 샅샅이 뒤지고 HTML에서 직접 또는 직접 변경하는 방법을 알아 내려고 노력했지만 손실이 있습니다.

Answer 1

이미지의 인라인 스타일로 해당 공간이 생성됩니다. 부모에게 옮기고 필요에 따라 조정하십시오.

<nav id="main-navigation" data-content-field="navigation-mainNav"> 
    <ul class="cf"> 
      <li class=""> 
       <a href="/">Home</a></li> 
      <li class=""> 
       <a href="/music/">Music</a></li> 
      <li class="" style="width:20%;height:20%;"> 
       <img src="/assets/img/glutenfreeradio.png"/></li> 
      <li class=""> 
       <a href="/reviews/">Reviews</a></li> 
      <li class=""> 
       <a href="/contact/">Contact</a></li> 
    </ul> 
</nav>