html - 如何在类中的 ul 中的 li 中设置 img 的 CSS？

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 上，你有一个额外的 “ here

<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>