在 HTML 中让 <input> 按钮和 <a> 大小相等答案

【问题标题】：Getting an <input> button and an <a> to equal size in HTML在 HTML 中让 <input> 按钮和 <a> 大小相等
【发布时间】：2011-11-11 21:21:36
【问题描述】：

我在 HTML/CSS 中遇到了以下问题：对于我的（离线）网站，有一个链接和一个提交按钮（在表单内）彼此相邻，如下所示：

<a href='settings.php' class='button'>Settings </a>

<form action='processing/logout.php' method='POST' class='inline'>
    <input type='submit' value='Sign out' class='redbutton'>
</form>

当两个元素都是链接时，它们会完美地排列在一起。然而，现在，即使链接和按钮具有与其关联的相同 CSS 样式，输入按钮（在高度上）也比链接大得多（尽管在扫视时几乎看不到）。

I created a jsFiddle to demonstrate.

其他论坛上的人要求重置 CSS，所以我也将其包括在内，即使删除它并不能解决问题。

我怎样才能让链接和输入按钮的高度相同？我错过了什么明显的东西吗？有没有 CSS 技巧可以让它们保持相同的高度？

【问题讨论】：

为什么它们必须相同？它们是两个不同的元素。
可以，但是等高的时候会更好看。
我很困惑。一个是按钮，另一个是锚。当锚点只是文本时，您如何期望它们具有相同的大小？
哦，一样高！这完全是另一回事。

标签： html css input hyperlink

【解决方案1】：

（内联）锚元素的大小在不同浏览器中的处理方式不一致。

可靠的解决方案是在链接中放置一个按钮。 小提琴：http://jsfiddle.net/m5m5M/22/。

<a href='settings.php'><input type='button' class='button' value='Settings' /></a><form action='processing/logout.php' method='POST' class='inline'><input type='submit' value='Sign out' class='redbutton'>
<form>

请注意，我省略了按钮之间的空格。这是因为当 HTML 中有任何空白时，内联元素会显示彼此之间的间隙。

【讨论】：

究竟是什么安全原因？
@dotweb 没关系，我对其他事情感到困惑。我刚刚在多个浏览器中运行了一些测试，并且按钮锚点的处理方式不同。例如，this 在 Firefos 中工作。然而，在 webkit 浏览器中，它没有。坚持答案中的解决方案。
我意识到这个答案是前段时间写的，但是在 <a> 元素中放置一个交互式元素（<a>、<input>、<button> 等）是无效的（参考： w3.org/TR/html-markup/a.html).

【解决方案2】：

在 button 类上使用 display: inline-block 应该可以解决问题。 http://jsfiddle.net/VB9RM/17/

【讨论】：

【解决方案3】：

现在是 2015 年，您仍然无法将链接的样式设置为每次都看起来像一个按钮（至少在 Firefox 中）。最好的方法是同时给出这两种样式：

box-sizing, vertical-align, padding, font-size, line-height

但如果您将高度设置为自动（或保留默认值），它仍然不会匹配。所以你需要高度的自动值 - Rob W 方法是最好的。

【讨论】：

【解决方案4】：

遇到了同样的问题。汤姆的回答帮助了我。

必须补充：

box-sizing: border-box;
font-size: 15px;
font-family: "DejaVu Serif";

我还有：边距、边框、填充、宽度

【讨论】：

【解决方案5】：

在汤姆的回答之上，很难找到的重要风格是

button.btn::-moz-focus-inner,
input[type="submit"].btn::-moz-focus-inner {  
  padding: 0; 
  border: 0;
}

【讨论】：