Question

我试图做到这一点我可以为每个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-->

Answer 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）阅读我的教程：I love lists.

使用html上的css和文本将不同的图像作为按钮添加到每个LI

1 个答案: