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

Question

我的<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>适合图像宽度。 Google Chrome中的<li>图片：

Answer 1

简单的解决方法是在此处使用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>

Answer 2

img {
  width: 10%;
}

我发现问题出在这里。然后，我将代码更改为：

img {
  width: 100px;
  height: 100%;
}

这表明问题已经解决！