我在
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技巧让他们成为同一个高度？
解决方法
(内联)锚点元素的大小在不同的浏览器之间是不一致的.
坚实的解决方案是在一个链接中放置一个按钮.小提琴：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中有空格时,内联元素显示出彼此之间的差距.