如何將錨標籤設計爲與按鈕具有相同高度的按鈕？

我正在改變我的網站上按鈕的風格的jQuery UI主題。大多數情況下，一切都很順利。如何將錨標籤設計爲與按鈕具有相同高度的按鈕？

但有一些錨標籤，我想要的風格作爲按鈕。我添加了類，它的樣式是我想要的，除了高度不一樣。有沒有什麼辦法可以讓風格化的錨標籤與風格化的按鈕標籤具有相同的高度？

下面是一些我的CSS的：

.mine-button { 
    outline: 0; 
    margin: 0 4px 0 0; 
    padding: 0 1em; 
    height: 2em; 
    text-decoration: none !important; 
    cursor: pointer; 
    position: relative; 
    text-align: center; 
    -moz-border-radius: 15px; 
    -webkit-border-radius: 15px 
}

使用它上的一個按鈕

一個例子：

<button class="mine-button ui-state-default" 
onclick="stuff here"> 
    <img src="/i_common/basket_add_24.gif" border="0" align="absmiddle"/> Add 
</button>

使用它的阿克爾一個例子：

<a class="mine-button ui-state-default" href="bla"> 
    <img src="/i_common/CD_down_24.gif" border="0" align="absmiddle"/> Free 
</a>

來源

2009-07-13 Echo

這應該做它：

display: inline-block;

高度不工作的原因是因爲錨標記標記了內聯元素。 The height property doesn't apply to inline elements, and the vertical margin, border and padding act differently。

Firefox 2中不支持inline-block，如果你仍然需要支持它，但你通常可以通過get it to work在上述行之前添加規則display:-moz-inline-box。

或者，您可以嘗試使用line-height屬性。

來源

2009-07-13 20:30:37 mercator

在某些情況下（閱讀我的情況），我發現'display：block' better'塊' – Aba 2016-01-25 15:44:26

邊境和對齊被廢棄的屬性，或者至少這些都是關於介紹，沒有內容，因此應該在CSS來完成，而不是在HTML代碼：

.mine-button { 
    border: 0; 
    vertical-align: bottom/middle/top/whatever; 
}

而且，alt是img元素的強制屬性。可以是空的（alt =「」雖然無意義的圖像很花哨）或有意義的（如果圖像傳達的信息還沒有出現在文字中）

來源

2009-07-13 20:58:25 FelipeAls

謝謝。有些時候我很匆忙，而我忘了修理我正在使用的舊HTML。 – Echo 2009-07-14 14:06:58

如何將錨標籤設計爲與按鈕具有相同高度的按鈕？

回答

相關問題