0

我试图做到这一点，我可以向每个 LI 添加一个图像，而不是一个项目符号图像，而是一个表示按钮本身的图像，并且我希望能够在 html 中使用文本。我已经尝试过#glass_menu ul li.shard1,.shard1 我无法弄清楚有人可以帮忙！

CSS：

#glass_menu {
width:984px;
text-align:center;
text-decoration:none;
display:inline;
position:relative;
bottom:-20px;
}
#glass_menu ul li{
padding: 0 40px 0 40px;
display: inline;
}

.shard1{
background-image:url(glasshard1.png);
background-repeat: no-repeat;
width:30px;
height:30px;

}
.shard2{
background-image:url(glasshard2.png);
background-repeat: no-repeat;
width:30px;
height:30px;    
}
.shard3{

}
.shard4{

}
.shard5{ 

}
.shard6{

}

html:

<div id="glass_menu">
<ul class="menu">
<li class="shard1"><a href="index.php">home</a></li>
<li class="shard2"><a href="Estimate.php"><span>Estimate</span></a></li>
<li class="shard3"><a href="why-should-you-choose-us.html"><span>help</span></a></li>
<li class="shard4"><a href="Contact.php"><span>Contact Us</span></a></li>
<li class="shard5"><a href="affiliates.html"><span>Affiliates</span></a></li>
<li class="shard6"><a href="Location.html"><span>Location</span></a></li>
</ul>
</div><!--end glass_menu div-->
4

1 回答 1

1

1) 重置您的列表：

#glass_menu ul li {
    list-style:none;
    margin:0;
    padding:0;
}

2) 不要设置 LI 的样式，除了定位/浮动。

#glass_menu li {
    float:left
}

3) 为 LINK 设置样式并使用display:block. 删除 SPAN，它没有理由在那里。

.shard1 a {
    background-image:url(glasshard1.png);
    background-repeat: no-repeat;
    width:30px;
    display:block;
    padding-left: 30px; <--- you need this to move your text to the right to uncover the background image.
}

4）阅读我的教程：我喜欢列表。

于 2013-04-04T21:15:33.303 回答