html - 为什么我的按钮没有完全对齐？

Question

我在这里发布了一个按钮：

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 放置对我来说一直是一个困难的项目。

Answer 1

推拉门技术之所以有效，是因为扩展一个矩形不会改变它的外观。但是扩展一个椭圆会，所以你的代码不会像你期望的那样工作。

这是我能得到的最好的：

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;