CSS菜單圖像背景左

Question

我有一個菜單ul li，我想在每個li中放入一個不同的圖像：

<ul id="menu">

<li class="home">
<a href="$urlsite/home">home</a>
</li>

<li class="sells">
<a href="$urlsite/sells">Sells</a>
</li>

<li class="message">
<a href="$urlsite/message">Message</a>
</li>

</ul>

CSS

#menu {
 position:relative;
 width: 100%;
 padding: 0;
 margin-top:0px;
 box-sizing: border-box;
 font-weight:bold;
}
#menu li {
 list-style: none;
 text-align:left;
 padding-left:20px;
 height:40px;
 line-height:40px;
 vertical-align: middle;
 border-bottom:0px;
}
#menu li a {
 margin:0;
 text-decoration:none;
 width:100%;
 height:100%;
 display: inline-block;
}

.home{
 background-image: url('http://infinitilinens.herokuapp.com/assets/icons/home_blue.png');
 background-size:20px;
 background-repeat: no-repeat;
 padding-left: 30px;
 display: block;
}

我的問題是，HOME圖標（和所有其他圖標）不在文本鏈接的前面。 如何使圖像與鏈接對齊？ http://jsfiddle.net/954baet0/

Answer 1

如果要將背景圖像用作徽標（請注意，它將不可單擊），則可以使用background-position屬性 。

最好的祝福

Answer 2

您只需將以下代碼行添加到.home中：

background-position: 0px 11px;

Answer 3

您可以使用背景位置

第一個值是水平位置，第二個值是垂直位置

#menu li {
 list-style: none;
 text-align:left;
 padding-left:20px;
 height:40px;
 line-height:40px;
 vertical-align: middle;
 border-bottom:0px;
background-position: 2px center;
}

的jsfiddle