李元素與圖像和徽章

我想創建一個李元素錨內和圖像之前。這裏是CSS，李元素與圖像和徽章

.left-panel > ul > li > a { 
     text-decoration: none; 
     display: block; 
     line-height:10px; 
     padding:20px; 
     color:#535353; 
    }

我不能使用列表樣式圖像。

我想在錨元素中添加徽章。

我是否需要使用span？或DIV？

如何在文字高度對齊圖像和徽章中心？

這裏是我的HTML，

<div class="left-panel"> 
    <ul> 
     <li class="current"> 
      <a href="#">Profile</a> 
     </li> 
     <li> 
      <a href="#">Logout</a> 
     </li> 
    </ul> 
</div>

來源

2015-10-13 JMA

你可以用僞元素嘗試：https：//開頭開發商.mozilla.org/EN-US /文檔/網絡/ CSS /僞元素。另外，您可以將背景圖像放入元素中，並設置其位置？ – sinisake

可以用理想跟蹤準元素::before \ ::after

.left-panel > ul > li { 
 
    list-style: none 
 
} 
 
.left-panel > ul > li > a { 
 
    text-decoration: none; 
 
    display: block; 
 
    line-height: 10px; 
 
    padding: 20px 40px; 
 
    color: #535353; 
 
    position: relative; /*new*/ 
 
} 
 
.left-panel > ul > li > a::before { 
 
    position: absolute; 
 
    left: 0; 
 
    content: " »» image «« " 
 
}

<div class="left-panel"> 
 
    <ul> 
 
    <li class="current"> 
 
     <a href="#">Profile</a> 
 
    </li> 
 
    <li> 
 
     <a href="#">Logout</a> 
 
    </li> 
 
    </ul> 
 
</div>

來源

2015-10-13 16:15:30 dippas

如何添加徽章？ – JMA

對於遲到回到你身後感到抱歉...無論如何，我只是回答了一個類似於你的問題[這裏]（http://stackoverflow.com/questions/33179566/how-do-i-vertically-align-my- list-items-with-the-bullets/33179897＃33179897），它會幫助你:) – dippas

李元素與圖像和徽章

回答

相關問題