如何將圖像添加到Html列表項中？

我有一個簡單的菜單下面的HTML代碼：如何將圖像添加到Html列表項中？

<div class="wHeader"> 
     <div class="header"> 
     <img src="header.png"> 
     </div><!-- header ends here --> 
<div class="menu-wrap"> 
    <nav class="menu"> 
     <ul class="clearfix"> 
      <li class="current-item">Home</li> 
      <li> 
       <a href="#">Language</a> 
       <ul class="sub-menu"> 
        <li><a href=#>Lang1</a></li> 
        <li><a href=#>Lang2</a></li> 
        <li><a href="#">Other ...</a></li> 
       </ul> 
      </li> 
      </ul> 
     </nav> 
</div> <!-- menu-wrap ends here-->

爲<ul> CSS樣式如下：

.sub-menu { 
    width:120%; 
    padding:5px 0px; 
    position:absolute; 
    top:100%; 
    left:0px; 
    z-index:-1; 
    opacity:0; 
    transition:opacity linear 0.15s; 
    background:#808080; 
}

我試圖把一個標誌形象其中一個列表項如下：

<li style="list-style-image: url('smallflag.png');"><a href=#">Lang1</a></li>

但到目前爲止，圖像沒有出現。與背景有衝突嗎？任何建議來解決這個問題？

來源

2016-12-02 user1915594

爲什麼你有一個頂部100％和不透明度設置爲0，這兩個屬性正在李隱藏或不在視圖中。你的財產很好，並且沒有不透明度：0和最高：100％。只要確保網址是正確的，並且該圖像存在於該網址中即可。 –

.sub-menu { 
 
width:120%; 
 
padding:5px 0px; 
 
position:absolute; 
 
/*top:100%;*/ 
 
<!--left:0px;--> 
 
z-index:-1; 
 
/*opacity:0;*/ 
 
transition:opacity linear 0.15s; 
 
background:#808080; 
 
}

<div class="wHeader"> 
 
    <div class="header"> 
 
     <!--<img src="header.png">--> 
 
    </div><!-- header ends here --> 
 
    <div class="menu-wrap"> 
 
    <nav class="menu"> 
 
     <ul class="clearfix"> 
 
     <li class="current-item">Home</li> 
 
     <li> 
 
     <a href="#">Language</a> 
 
      <ul class="sub-menu"> 
 
      <li><a href=#>Lang1</a></li> 
 
      <li><a href=#>Lang2</a></li> 
 
      <li style="list-style-image: url('http://placehold.it/20x20');"><a href="#">Other ...</a></li> 
 
      </ul> 
 
     </li> 
 
     </ul> 
 
     </nav> 
 
    </div>

子菜單類隱藏，並將其移動到屏幕的底部，還有圖片丟失與左：0像素財產。

如果您註釋掉頂：100％，左：0和不透明性，該項目將展示其形象

來源

2016-12-02 14:23:44 Tuco

如何將圖像添加到Html列表項中？

回答

相關問題