菜单图像大小未通过CSS更改

Question

我有这个菜单栏，已被图像取代。
在普通视图下，一切看起来都不错，但是当我转向移动视图时
看起来很笨拙。我尝试过Padding，但是单个单元格却没有
互相弥补空间。 这是屏幕截图

li.topmenu1 {
  height: 20px;
}

<nav id="category" class="drawer_block pc">
  <ul class="category-nav">
    <li class="topmenu1">
      <a href="http://azlily.bex.jp/eccube_1/html"><img src="http://azlily.bex.jp/eccube_1/html/template/default/img/menu/home.png"></a>
    </li>
    <li class="topmenu2">
      <a href="http://azlily.bex.jp/eccube_1/html/products/list"> <img src="/eccube_1/html/template/default/img/menu/products.png"></a>
    </li>
    <li class="topmenu3">
      <a href="http://azlily.bex.jp/eccube_1/html/user_data/concept"><img src="/eccube_1/html/template/default/img/menu/about.png"></a>
    </li>
    <li class="topmenu4">
      <a href="http://azlily.bex.jp/eccube_1/html/user_data/howto"><img src="/eccube_1/html/template/default/img/menu/howtouse.png"></a>
    </li>
    <li class="topmenu5">
      <a href="http://azlily.bex.jp/eccube_1/html/user_data/column"><img src="/eccube_1/html/template/default/img/menu/column.png"></a>
    </li>
    <li class="topmenu8">
      <a href="http://azlily.bex.jp/eccube_1/html/user_data/faq"><img src="/eccube_1/html/template/default/img/menu/FAQ.png"></a>
    </li>
  </ul>
</nav>

注意-我还尝试添加图片的完整URL
但不知何故，它不会出现在摘要中：/

Answer 1

确保category-nav中的元素具有正确的边距和填充。

如果要确保菜单中的各张图片看起来都不错，则可能要一一设置图片的样式。

因此，根据您的情况，您可以编辑所有topmenu1，topmenu2 ...的高度...

此外，您还可以在Chrome上使用检查工具在CSS代码中查找导致此类问题的原因。您可以实时更改代码，看看是什么导致了什么。

Answer 2

选中此https://jsfiddle.net/1dvy2854/4/

.category-nav li  {
    display: inline-block;
}

@media only screen and (max-width: 600px) {
  .category-nav li  {
    display: block;
}
.category-nav li img {
    max-width: 65px;
    display: inline-block;
}}