如何将锚标签设计为与按钮具有相同高度的按钮？

我正在改变我的网站上按钮的风格的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

如何将锚标签设计为与按钮具有相同高度的按钮？

回答

相关问题