如何刪除列表圖像周圍的水平空間？

在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中直接更改它，但我不知所措。

來源

2017-03-28 Stephen Shutters

圖像的內聯樣式正在創建該空間。將這些移到父級並根據需要進行調整。

<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>

來源

2017-03-28 21:01:10

哇。這樣一個簡單的修復。我覺得很蠢。非常感謝！現在這裏是一個新的但相關的問題：既然標識是應該水平說話的地方，文本列表項目已被推下來與標識列表項目的底部對齊。我如何定位它們以標識列表項目爲中心？ –

@StephenShutters add'.info-page-layout-poster＃main-navigation ul {display：flex; justify-content：center; align-items：center; }' –

你是一個美麗的人。 –

如何刪除列表圖像周圍的水平空間？

回答

相關問題