使用背景图像作为按钮。如何根据文本的长度调整按钮大小？

问题描述：

我刚开始学习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>

喜！你可以提供图像，如果可能的话，你想实现，以便我有帮助你的想法。 – 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/

使用背景图像作为按钮。如何根据文本的长度调整按钮大小？

相关推荐