0

ここにボタンを投稿しました：

http://buttontest.raptorshop.com/

しかし、なぜか完全には揃っていません。何が原因でしょうか?

行の高さ、パディングなどを変更してみました。

私が持っているCSSコードは次のとおりです。

a.gbutton {
    background: transparent url('buttonside.png') no-repeat scroll top right;
    color: #444;
    display: block;
    float: left;
    font: normal 12px arial, sans-serif;
    height: 82px;
    margin-right: 6px;
    padding-right: 46px; /* sliding doors padding */
    text-decoration: none;
}

a.gbutton span {
    background: transparent url('buttonmain.png') no-repeat;
    display: block;
    line-height: 68px;
    padding: 5px 0 5px 18px;
}

私はオンラインで見つけたチュートリアルからこれを変更しています.完璧なCSSの配置は私にとって常に難しい項目でした.

4

1 に答える 1

2

長方形を拡張しても外観が変わらないため、引き戸の手法が機能します。ただし、楕円を拡張すると、コードが期待どおりに機能しなくなります。

これが私が得ることができる最高のものです：

a.gbutton {
    background: transparent url('buttonside.png') no-repeat scroll right top;
    color: #444;
    display: block;
    float: left;
    font: normal 12px arial, sans-serif;
    height: 82px;
    margin-right: 10px;
    padding-right: 51px;
    text-decoration: none;
}

a.gbutton span {
    background: transparent url('buttonmain.png') no-repeat left top;
    background-size: 100% auto;
    display: block;
    line-height: 68px;
    padding: 5px 0 5px 18px;
    height: 100%;
    width: 100%;
}

アップデート

単一の画像を使用して CSS を指定するだけです。

background-size: 100% auto;
于 2013-02-03T17:39:05.277 に答える