保持行內文本

我一直在製作一個按鈕（希望）看起來相當現實。其中的一部分是當文本被按下時，文本在按鈕內下移1px。我已經通過向頂部添加了一個附加像素並從底部添加了一個像素來完成此操作。保持行內文本

不幸的是，我設計了我的按鈕來工作內聯（內聯塊），當按鈕被「推」時，這意味着線上的任何文本也被推下。現在我想我知道爲什麼（大概是由於文本的底線），但我想知道是否有人知道我能如何在保持周圍文本的同時獲得相同的「推送」效果。如果可能，我想盡量避免浮動。

反正與代碼： 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; 
}

來源

2011-11-25 Chris

與行高嘗試過嗎？ –

同樣的問題：http://gard.me/VTxI6。此外，這會導致按鈕更改高度，這是一種不希望的效果。 – Chris

好吧，垂直對齊我們要好得多 –

，因爲它是inline-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; 
}

和問題解決

來源

2011-11-25 13:02:10

哇，這是完美的工作...我不會說謊我覺得我的問題比這更難：PI不得不使用'-1px'來思考垂直對齊，而不是+1。非常感謝:)以下是其他人的參考資料：http：//gard.me/q4nLn – Chris

保持行內文本

回答

相關問題