如何设置锚标签的样式，使其看起来像一个与按钮高度相同的按钮? [英] 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:

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

在按钮上使用它的示例:

An example using it on a button:

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

在 achor 上使用它的示例:

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>

推荐答案

应该这样做:

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，如果你仍然需要支持它，但你通常可以 通过添加规则display:-moz-inline-box before 上一行.

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屋！