添加一個不同的圖像作爲一個按鈕，使用HTML上的CSS和文本的每個LI

我試圖讓它是我可以添加圖像到每個李不是子彈形象，但一個圖像來表示按鈕本身，我想能夠在html中使用文本。我已經嘗試過#glass_menu ul li.shard1，.shard1我無法弄清楚有人可以幫忙！添加一個不同的圖像作爲一個按鈕，使用HTML上的CSS和文本的每個LI

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

來源

2013-04-04 user1785934

這是背景圖像不工作？我認爲它的工作原理是[我在這裏看到]（http://jsfiddle.net/cbxhj/1/）。如果你想刪除子彈，然後使用'list-style：none;' – crazyrohila 2013-04-04 21:16:03

1）重置您的列表：

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

2）不要樣式的李，除了定位/花車。

#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.

來源

2013-04-04 21:15:33

適合我。 ks一直試圖找出所有li，ul，菜單和東西的類和div – user1785934 2013-04-04 21:38:04

添加一個不同的圖像作爲一個按鈕，使用HTML上的CSS和文本的每個LI

回答

相關問題