2

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

1 に答える 1

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/

于 2013-03-18T12:01:53.000 に答える