CSS背景图片似乎没有在链接旁边创建图标

Question

我使用css ， ul和li创建了一个水平菜单。 我也想在每个链接旁边显示一个图标。 但是我为此写的东西行不通。
HTML：

<ul id="menu2ul">
    <li id="general"><a href="g">General Information</a></li>
    <li id="technical"><a href="t">Technical Information</a></li>
</ul>

CSS：

#general {
    background:url('https://cdn2.iconfinder.com/data/icons/freecns-cumulus/16/519899-175_Information-16.png') left center no-repeat;
}

#menu2ul {
    list-style:none;
    margin:0 0 0 0;
    padding:0
}

#menu2ul li {
    float:left;
    line-height:50px;
    border-left:1px solid #A3D26F;
    text-align:center;
    padding-left:0px
}

#menu2ul li a {
    padding:0px 30px 0px 30px;
    color:#ffffff;
    font-size:10pt;
    font-weight:bold;
    display:block;
    height:50px;
    background-color:#8CC637;
    min-width:100px;
    text-decoration:none
}

请检查我的jsfiddle 。 我怎么解决这个问题 ？

Answer 1

更改#general以#general a

#general a{
    background:url('https://cdn2.iconfinder.com/data/icons/freecns-cumulus/16/519899-175_Information-16.png') left center no-repeat;
}

在其他情况下，图片将位于锚标签的背景后面

小提琴演示

如果您想要所有列表项的图标，请使用

#menu2ul a{
    background:url('https://cdn2.iconfinder.com/data/icons/freecns-cumulus/16/519899-175_Information-16.png') left center no-repeat;
}

小提琴演示

Answer 2

a {
background:url('https://cdn2.iconfinder.com/data/icons/freecns-cumulus/16/519899-   175_Information-16.png') left center no-repeat;
}

检查一下：

http://jsfiddle.net/829TE/

Answer 3

您的id =“ general”在列表项上，而不是内部锚标记。

小提琴

一种解决方案：

页：

<ul id="menu2ul">
    <li><a href="g" class="infolink">General Information</a></li>
    <li><a href="t" class="infolink">Technical Information</a></li>
</ul>

CSS：

.infolink {
    background:url('https://cdn2.iconfinder.com/data/icons/freecns-cumulus/16/519899-175_Information-16.png') left center no-repeat;
    background-position: 5% 50%;
}