Как установить CSS img внутри li внутри ul внутри класса?

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 слишком далеко в глубине (внутри литий тег внутри уль тега), чтобы быть замеченными или что-то. Я хочу, чтобы мои изображения 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">

Надеюсь, что это не так.