使用背景圖像作爲按鈕。如何根據文本的長度調整按鈕大小？

我剛開始學習html和css。我正在爲我的按鈕使用背景圖片。我怎樣才能調整按鈕的大小，使所有的文字都適合它。使用背景圖像作爲按鈕。如何根據文本的長度調整按鈕大小？

這裏是我的CSS代碼

#header a{ 
display: compact; 
background: url("images/tab.gif") no-repeat scroll left top transparent; 
color: #FFFFCC; 
text-decoration: none; 
padding: 0.75em 1em .025em; 
background-size: contain; 
}

繼承人的HTML：

<ul> 
<li> <a href="">Overview</a> </li> 
<li> <a href="">This text is too long</a></li> 
</ul>

來源

2013-03-18 Collin

喜！你可以提供圖像，如果可能的話，你想實現，以便我有幫助你的想法。 – jhunlio 2013-03-18 07:09:42

試試這個 - 更向後比使用background-size:cover兼容。

的HTML：

<ul> 
<li> <a href="">Short Menu Item</a> </li> 
<li> <a href="">Much Longer Menu Item</a></li> 
</ul>

和CSS：

ul { 
    margin-left:0 ; 
    padding-left:0 ; 
    list-style-type:none ; 
} 

li { 
    margin:12px 0 !important ; 
} 

a { 
    color: #FFFFCC; 
    text-decoration: none; 
    text-align:left ; 
    padding:4px ; 
    background: url("http://d-grafix.com/textures/2006-07-31/2006-07-31-seamless-grass-9613645-thumb.jpg") ; 
}

演示是在這裏：http://jsfiddle.net/Kg5D6/1/

來源

2013-03-18 12:01:53 Cynthia

使用背景圖像作爲按鈕。如何根據文本的長度調整按鈕大小？

回答

相關問題