html - 保持内联文本到位

Question

我一直在制作一个(希望)看起来相当逼真的按钮。其中一部分是在按下按钮时让文本在按钮内向下移动 1px。我通过在顶部添加一个额外的像素并从底部移除一个像素来完成此操作。

不幸的是，我将我的按钮设计为内联工作(内联 block )，当按钮被“按下”时，这意味着该行上的任何文本也会被按下。现在我想我知道为什么(大概是由于文本的基线)但我想知道是否有人知道我如何在保持周围文本到位的同时获得相同的“插入”效果。如果可能，我想避免 float 。

无论如何继续代码: http://gard.me/xsfqH

HTML:

<a class="button noIcon smaller" href="#">Buy Now</a> hello world

CSS:

a.button {
    margin: 20px;
    display: inline-block;
    padding: 12px 12px 12px 12px;

    background: none;
    background-repeat: no-repeat;
    background-position:  9px 5px;
    background-position:  9px 5px, 0 0;

    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    border-width: 1px;
    border-style: solid;

    font-family: Verdana, Arial, Sans-Serif;
    text-decoration: none;
}

a.button:active {
    padding-top: 13px; padding-bottom: 11px;
    -webkit-box-shadow: inset 0px 1px 6px -1px #000000;
    -moz-box-shadow: inset 0px 1px 6px -1px #000000;
    box-shadow: inset 0px 1px 6px -1px #000000;
}

a.button.noIcon {
    color: #FFECEA;
    background-position: 0 0;
    background-color: #E46553;
    background-image: -o-linear-gradient(bottom, #D15039 0%, #F27466 100%);
    background-image: -moz-linear-gradient(bottom, #D15039 0%, #F27466 100%);
    background-image: -webkit-linear-gradient(bottom, #D15039 0%, #F27466 100%);
    background-image: -ms-linear-gradient(bottom, #D15039 0%, #F27466 100%);
    background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #D15039), color-stop(1, #F27466));
    border-color: #A03E33;
}

Answer 1

因为它是行内 block ，所以您可以使用垂直对齐。

所以你所要做的就是

a.button:active {
    padding-top: 13px;padding-top:11px;
    -webkit-box-shadow: inset 0px 1px 6px -1px #000000;
    -moz-box-shadow: inset 0px 1px 6px -1px #000000;
    box-shadow: inset 0px 1px 6px -1px #000000;
    vertical-align:1px;
}

问题解决了