html - 让 &lt;input&gt; 按钮和 <a> 在 HTML 中大小相等

Question

我在 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 技巧可以使它们具有相同的高度？

Answer 1

(内联) anchor 元素的大小在不同的浏览器中处理不一致。

可靠的解决方案是在链接中放置一个按钮。 fiddle :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 中有任何空格时，内联元素会在彼此之间显示一个空隙。