如何在類裏面的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？

回答

相關問題