Мой LI занимает начальную ширину изображения в 500 пикселей, в то время как я устанавливаю ширину изображения на 10%

Question

My <li> занимает начальную ширину изображения в 500 пикселей, в то время как я устанавливаю ширину изображения в 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> в Google Chrome:

Answer 1

img {
  width: 10%;
}

Я обнаружил, что проблема здесь. Затем я изменяю код как:

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

Это показывает, что проблема исчезла!

Answer 2

Простое решение - использовать значение 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>