如何风格的锚标签看起来像一个按钮与按钮的高度相同？ [英] How to style an anchor tag to look like a button with the same height as the button?

问题描述

我正在改变我的网站上的按钮通过一个jquery ui主题样式。大多数情况下，一切都很顺利。

I am working on changing the buttons on my site to be styled by a jquery ui theme. Mostly everything is going good with it.

但是有一些锚标签，我想要被称为按钮。我添加了类和它的样式它我怎么想，除了高度是不一样的。是否有任何方法可以使样式的锚标签与样式的按钮标签具有相同的高度？

But there are a few anchor tags that I wanted styled as buttons. I added the classes and it styles it how I want it except that the height is not the same. Is there any way to make the styled anchor tag have the same height as the styled button tag?

这里是我的一些css：

Here is some of my 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>

在锚点上使用它的示例：

An example using it on an achor:

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

推荐答案

$ b

This should do it:

display: inline-block;

您的高度不起作用的原因是锚标记标记为内联元素。 height 属性不适用于内联元素，并且垂直边距，边框和填充操作方式不同。

The reason your height isn't working is because the anchor tag marks an inline element. The height property doesn't apply to inline elements, and the vertical margin, border and padding act differently.

Firefox 2不支持 inline-block ，如果你仍然需要支持它，但你通常可以添加规则显示： -moz-inline-box 之前

Firefox 2 doesn't support inline-block, if you still need to support it, but you can usually get it to work by adding a rule display:-moz-inline-box before the above line.

或者，您可以尝试使用 line-height 属性。

Alternatively, you could try using the line-height property.

这篇关于如何风格的锚标签看起来像一个按钮与按钮的高度相同？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！