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>

如何删除列表图像周围的水平空间？

1 个答案: