获取< input>按钮和< a>在HTML中等于大小 [英] Getting an <input> button and an <a> to equal size in HTML
问题描述
我在HTML / CSS中遇到了以下问题：对于我的（离线）网站，有一个链接和一个提交按钮（位于表单内），如下所示：
I've run across the following issue in HTML/CSS: For my (offline) site, there are a link and a submit button (which is inside a form) right next to each other, like this:
<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样式与它们相关联，然而输入按钮是恼人的（高度）比链接（虽然它几乎看不到，当扫视时）。
When both of the elements are links, then they line up next to each other perfectly. Now, however, even though the link and button have the same CSS styling associated with them, then input button is annoyingly larger (in height) than the link (though it's barely visible when glancing over).
在其他论坛的人要求重置CSS，所以我也包括了，即使删除它不会消除问题。
People on other forums asked for the reset CSS, so I included that as well, even though deleting it doesn't remove the problem.
如何获得链接和输入按钮的高度相同？这是我错过的明显内容吗？
How can I get the link and the input button to be the same height? Is it something obvious I missed? Is there a CSS trick to get them to be the same height?
推荐答案
（内联）锚元素的大小被处理不同浏览器之间不一致。
The size of the (inline) anchor element is treated inconsistently across different browsers.
固定的解决方案是在链接内放置一个按钮。 小提琴： http://jsfiddle.net/m5m5M/22/ 。
The solid solution is to place a button inside a link. 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中有任何空格时，内联元素会显示彼此之间的差距。
Note that I have omitted whitespace between the buttons. That's because inline elements show a gap between each other when there's any whitespace in the HTML.
这篇关于获取< input>按钮和< a>在HTML中等于大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
