Question

在我的html文件中，我的页面顶部有一个导航栏，这样就开始了：

    <div class="“topNav">
      <ul>
        <li><img src="assets/map.png"> <a href="locations.html">Locations</a></li>
        <li><img src="assets/length.png"> <a href="length.html">Length</a></li>
     </ul>
   </div>

等等。

在我的CSS中我试过

.topNav img {
  width: 10%;
  height: auto;
}

除了img太深（在ul标签内的li标签内）要注意的东西。我希望我的topNav的图像为10％，但不是我页面上的所有图像。我的页面下方还有其他图像，我还有其他的风格图。

Answer 1

问题出在您的HTML上，您还有一个额外的 “

<div class="“topNav">

JS Fiddle

.topNav img {
  border:2px green solid;
}

<div class="topNav">
  <ul>
    <li><img src="//placehold.it/100x50?text=img-1"> <a href="locations.html">Locations</a></li>
    <li><img src="//placehold.it/100x50?text=img-2"> <a href="length.html">Length</a></li>
    <li><img src="//placehold.it/100x50?text=img-3"> <a href="locations.html">Locations</a></li>
    <li><img src="//placehold.it/100x50?text=img-4"> <a href="length.html">Length</a></li></ul>
</div>

Answer 2

您需要使用.topNav > ul>li>img或.topNav ul li img任何人都可以使用。

Answer 3

除了@pritesh，你的代码有一个拼写错误<div class="“topNav">应为<div class="topNav">

希望这是它不起作用的原因。

如何在类里面的ul里面设置一个img里面的CSS？

3 个答案: