html - 我的LI占用了500px的初始图像宽度，而我将图片宽度设置为10％

我的<li>占用了500px的初始图像宽度，而我将图片宽度设置为10％。代码如下：

header nav ul {
  display: flex;
}

header nav ul li {
  list-style-type: none;
}

header nav ul li a {
  list-style: none;
}

header nav ul a {
  text-decoration: none;
  color: white;
}

img {
  width: 10%;
}

<header>
  <nav>
    <ul>
      <li>
        <a><img id="navLogo" src="http://placekitten.com/800/800"></a>
      </li>
      <li><a href="#">Home</a></li>
      <li><a href="#">News</a></li>
      <li><a href="#">Blogs</a></li>
      <li><a href="#">Education</a></li>
    </ul>
  </nav>
</header>

这可能很简单，但我只想<li>适应图像宽度。谷歌浏览器中<li>的图片：

最佳答案

简单的解决方法是在此处使用px值而不是%值。我不确定为什么...但是这可以解决这里的主要问题。

我接受了您的代码，并做了一些其他的简化，因此只需很少的代码即可完成相同的操作。每次更改都会添加注释。

header nav {
  display: flex;
  background: #CCC; /* Added so we can see the text */
  align-items: center; /* Added to vertically center all the items*/
}

header nav a {
  text-decoration: none;
  color: white;
  padding: 10px; /* Added to space out items*/
}

#navLogo {
  display: block; /* Added remove extra space below image */
  width: 30px; /* Use a px value instead of % to avoid spacing issues */
}

<header>
  <nav>
    <a href="#"><img id="navLogo" src="http://placekitten.com/300/300"></a>
    <a href="#">Home</a>
    <a href="#">News</a>
    <a href="#">Blogs</a>
    <a href="#">Education</a>
  </nav>
</header>