CSS 如何设置锚标签的样式，使其看起来像一个与按钮高度相同的按钮？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1121823/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to style an anchor tag to look like a button with the same height as the button?
提问by Echo says Reinstate Monica
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.
我正在努力将我网站上的按钮更改为 jquery ui 主题的样式。大多数情况下，一切都很顺利。
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?
但是有一些锚标签我想要样式为按钮。我添加了这些类，它按照我想要的方式设置样式，除了高度不一样。有什么办法可以让样式锚标签与样式按钮标签具有相同的高度？
Here is some of my css:
这是我的一些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>
An example using it on an achor:
在 achor 上使用它的示例：
<a class="mine-button ui-state-default" href="bla">
<img src="/i_common/CD_down_24.gif" border="0" align="absmiddle"/> Free
</a>
采纳答案by mercator
This should do it:
这应该这样做：
display: inline-block;
The reason your height isn't working is because the anchor tag marks an inline element. The heightproperty doesn't apply to inline elements, and the vertical margin, border and padding act differently.
您的高度不起作用的原因是因为锚标记标记了一个内联元素。该height属性不适用于内联元素，并且垂直边距、边框和填充的作用不同。
Firefox 2 doesn't support inline-block, if you still need to support it, but you can usually get it to workby adding a rule display:-moz-inline-boxbeforethe above line.
Firefox 2 不支持inline-block，如果您仍然需要支持它，但通常可以通过在上述行之前添加规则来使其工作。display:-moz-inline-box
Alternatively, you could try using the line-heightproperty.
或者，您可以尝试使用该line-height属性。
回答by FelipeAls
borderand alignare deprecated attributes, or at least these are about presentation, not content and as such should be done in CSS, not in the HTML code:
border和align是不推荐使用的属性，或者至少这些是关于表示的，而不是内容，因此应该在 CSS 中完成，而不是在 HTML 代码中：
.mine-button {
border: 0;
vertical-align: bottom/middle/top/whatever;
}
Also, altis a mandatory attribute of the img element. Can be empty (alt="" for fancy though meaningless images) or meaningful (if image conveys information not already present in text)
此外，alt是 img 元素的必需属性。可以为空（alt="" 表示花哨但无意义的图像）或有意义（如果图像传达文本中尚未存在的信息）
