Html 保留内联文本

我一直在做一个（希望）看起来相当逼真的按钮。其中一部分是按下按钮时，文本在按钮内向下移动1px。我在顶部添加了一个额外的像素，从底部删除了一个

不幸的是，我将我的按钮设计为内联工作（内联块），当按钮被“按下”时，意味着行上的任何文本也被按下。现在我想我知道为什么了（大概是因为文本的基线），但我想知道是否有人知道我如何在保持周围文本的同时获得同样的“推”效果。如果可能的话，我希望避免浮动

不管怎样，请继续使用代码：

HTML:

---

因为它是内联块，所以可以使用垂直对齐

所以你要做的就是

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;
}

---

问题已解决

相同的问题：。此外，这会导致按钮的高度发生变化，这是一种不希望出现的效果。好吧，垂直对齐我们更好。哦，这是完美的工作。。。我不想撒谎，我认为我的问题比这更难：P我确实必须使用

-1px

思想来进行垂直对齐，而不是+1。非常感谢：）以下是其他人的参考：

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;
}

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;
}