リストイメージの周りの水平スペースを削除するにはどうすればよいですか？

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>