2015-10-13 41 views
0

我想創建一個李元素錨內和圖像之前。 這裏是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> 
+0

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

回答

1

可以用理想跟蹤準元素::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>

+0

如何添加徽章? – JMA

+0

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