如何将锚标记设置为看起来像与按钮高度相同的按钮？答案

【问题标题】：How to style an anchor tag to look like a button with the same height as the button?如何将锚标记设置为看起来像与按钮高度相同的按钮？
【发布时间】：2023-03-21 17:58:01
【问题描述】：

我正在努力将我网站上的按钮更改为 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>

在 achor 上使用它的示例：

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

【问题讨论】：

标签： css jquery-ui

【解决方案1】：

应该这样做：

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，如果您仍然需要支持它，但您通常可以通过在上面的行添加规则display:-moz-inline-boxbefore 来get it to work。

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

【讨论】：

在某些情况下（阅读我的情况）我发现display: block 比inline-block 更好

【解决方案2】：

border 和 align 是不推荐使用的属性，或者至少这些是关于表示的，而不是关于内容的，因此应该在 CSS 中完成，而不是在 HTML 代码中：

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

另外，alt 是 img 元素的强制属性。可以是空的（alt="" 表示花哨但无意义的图像）或有意义的（如果图像传达了文本中尚未存在的信息）

【讨论】：

谢谢。有时我很着急，忘记修复我正在使用的旧 HTML。