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

Question

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

Answer 1

试试这个 - 它比使用 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/