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;
}

在其他情况下，图像将位于锚标记

的背景之后

Fiddle Demo

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

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

Fiddle Demo

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

你的身份=＆＃34;一般＆＃34;在列表项上，而不是内部锚标记。

fiddle

一个解决方案：

页：

<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%;
}

css背景图像似乎没有在链接旁边创建图标

3 个答案: