提交按钮无边框-高度/对齐问题

Question

一个简单的CSS问题，我似乎永远无法快速修复-

我有一行文本，后面是一个表单，它由一些不可见的输入和一个提交按钮组成。我已经从提交中删除了边框和背景，所以只有文本-

我的html-

<p>Posted about 21 hours ago.</p>
<form class="button_to" data-remote="true" action="/comments/8/likes/114" method="post"> 
<input type="hidden" ...... > <!--not actual markup -->
<input type="submit" value="unlike" html_options="classlike_button_form">
</form>

我的css-

p {
    color: #595959;
    float: left;
    font: 85% "Arial",Verdana,sans-serif;
    line-height: 131%;
    padding-bottom: 0;
}
input {
    background-color: transparent;
    border: 0 none;
    color: #3B5998;
    font: 85% "Arial",Verdana,sans-serif;
    float:left
}

问题是p标记中的文本和按钮中的文本没有水平对齐。

我正在使用HTML5样板中包含的重置css和雅虎文本大小。

我真的不想用利润或定位来解决这个问题，所以任何帮助都会很棒。

感谢

EDIT-我无法更改HTML结构

Answer 1

这似乎有效：http://jsfiddle.net/8BHtz/6/

我移除了浮点数，并将display: inline-block; vertical-align: middle;添加到p和form。它适用于Chrome、Firefox、Safari和IE8。然而，由于inline-block，它在IE7或更低版本中无法正常工作。由于p和form现在以内联方式显示，您可能需要将它们封装在div中(http://jsfiddle.net/8BHtz/7/)。

Answer 2

当我将您的html和CSS插入jsFiddle时，看起来不错：http://jsfiddle.net/LAzUf/.你有萤火虫吗？看起来input标记是从另一个设置继承样式吗？