Html 如何在<；李>；标签大小相同

我遇到的问题是，我无法理解为什么当我瞄准每个li标签中的所有图像时，它们的大小不一样。它们都会缩小或变大，但不会保持相同的大小。第一个项目将是小的，然后他们都逐渐增加的大小与最后一个项目是最大的

以下是一张快照，请注意交叉点：

这是我的html：

<nav class="nav2">
        <ul>
          <li><a href="#"><img src="images/down_arrow.png" alt="cross">MENU</a></li>
          <li><a href="#"><img src="images/down_arrow.png" alt="cross">LOCATIONS</a></li>
          <li><a href="#"><img src="images/down_arrow.png" alt="cross">CATERING</a></li>
          <li><a href="#"><img src="images/down_arrow.png" alt="cross">GIFT CARDS</a></li>
          <li><a href="#"><img src="images/down_arrow.png" alt="cross">ORDER ONLINE</a></li>
        </ul>
</nav>

最终目标是让它们看起来像这样：

---

非常感谢您的帮助，并提前向您表示感谢。

您的图像当前设置为其父图像宽度的30%。在这种情况下，

锚定

标记。由于文本的宽度不同，因此每个图像的宽度也不同。将图像

width

设置为固定大小，如

15px

，它们都将是相同的大小。@brychowitson谢谢你，我没有意识到，谢谢你对它的澄清！很高兴这有道理。如果您完全删除

宽度

，它将默认为图像的本机大小。您的图像当前设置为其父图像宽度的30%。在这种情况下，

锚定

标记。由于文本的宽度不同，因此每个图像的宽度也不同。将图像

width

设置为固定大小，如

15px

，它们都将是相同的大小。@brychowitson谢谢你，我没有意识到，谢谢你对它的澄清！很高兴这有道理。如果完全删除

宽度

，它将默认为图像的原始大小。

/*SECOND NAV*/

.nav2{
  font-size:15px;
  color:grey;


}

.nav2 ul{
  padding:0;
  margin-left:600px;
}

.nav2 li{

  display:inline-block;


}

.nav2 li a{
  text-decoration:none;
  color:black;
  font-weight:bold;
  height:100%;
  width:100%
  padding:0;
}

.nav2 li img{
  margin:0;
  padding:0;
  vertical-align: middle;
  width:30%;
  margin-right:-10px;

}