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

在我的html文件，我有我的开始页面的顶部导航栏开始了这样的：如何在类里面的ul里面设置一个img的CSS？

<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标签内的L1标签）要注意什么。我希望我的topNav的图像为10％，但不是我网页上的所有图像。我在页面的下半部分有其他图像，我还有其他的风格计划。

来源

2016-02-08 TidusWulf

（1）您的CSS是正确的。（2）“*我希望我的topNav的图像为10％.. *” - 10％是什么？ – Abhitalks

你有没有尝试添加一个宽度和高度的图像在img标签本身？ – HebleV

您的课程topNav在它前面有'''，可能是拼写错误？ – djl

问题是与你的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>

来源

2016-02-08 07:50:22

啊！多么尴尬。我很害怕这是一个错字x_x – TidusWulf

好吧，它发生了，有时它需要双倍 - *或三重* - 检查，也许是一杯咖啡:) –

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

来源

2016-02-08 07:44:15 pritesh

您的选择器与OP中的'.topNav img'的区别在于，您只指定嵌套在'li'元素中的图像，而不是嵌套在''内部的其他图像。 topNav' *但是* ul'之外，但'.topNav img'工作得很好否则 –

除了@pritesh你的代码有一个错字<div class="“topNav">应该是<div class="topNav">

希望这是它不工作的原因。

来源

2016-02-08 07:53:45 DebRaj

@米创意我并不是说你有一个错字。我想提Pritesh，主要问题有一个错字。你的回答是正确的。 – DebRaj

当然，为什么我在更新答案后删除了我的评论 –

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

回答

相关问题