Question

我想使用带有文本旁边的小图标的li进行导航。我设法让它工作，但我如何编辑<li>的属性，如颜色，填充等。

如果我更改.homeicon的填充，它会移动小图标。有没有办法让li下的所有主要属性只有.homeicon下的图标？

JSFiddle： http://jsfiddle.net/PFQke/45/

HTML

<ul id="navigation">
    <li class="homeicon"><a href="">Home</a></li>
</ul>

CSS

#navigation {
    margin:14px;
    height:80px;
}
#navigation li {
    list-style:none;
    margin:10px;
    padding:10px;
    display:inline;
    margin-left:15px;
    font-size:16px;
    font-weight:bold;
    color:#ffffff;
    text-shadow: 1px 1px #000000;
    -moz-border-radius: 5px;
    border-radius: 5px; 
    -webkit-box-shadow: 4px 4px 9px rgba(50, 50, 50, 0.75);
    -moz-box-shadow:    4px 4px 9px rgba(50, 50, 50, 0.75);
    box-shadow:         4px 4px 9px rgba(50, 50, 50, 0.75); 
}
#navigation .homeicon {
    background: url("images/home.png") no-repeat top left;
    padding: 3px 0px 4px 25px;
 }

Answer 1

您可以尝试将图标实际更改为<li>的子项，例如：

#navigation .homeicon a {
  }

将样式设置为旧#navigation .homeicon {的样式。然后，对<li>的更改不会直接影响到图标本身。

注意：我更改了图标，因此我可以看到它的直观表示

http://jsfiddle.net/franciscop/PFQke/47/

使用<li>中的图标并具有单独的属性？</li>

1 个答案: