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

【问题标题】：Submit button no borders - height / alignment issue提交按钮无边框 - 高度/对齐问题
【发布时间】：2011-06-22 22:02:19
【问题描述】：

一个我似乎永远无法快速解决的简单 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 和 Yahoo 文本大小。

我真的不想用边距或定位来修复它，所以任何帮助都会很棒。

谢谢

编辑 - 我无法更改 HTML 结构

【问题讨论】：

我在 Chrome 中看到了这个问题，但在 FF 中没有
谢谢，我也可以在 Chrome 的 jsfiddle.net/LAzUf 上看到它。仍然不知道是什么原因造成的。

标签： html css

【解决方案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/) 中。

【讨论】：

我在 Firefox 5 上，但仍然有些偏差，我也认为可以在保留浮动的同时做到这一点。
jsfiddle.net/8BHtz/11 怎么样（仅在输入时删除浮动，HTML 略有变化）？
我刚刚在我的页面上尝试过它并且它有效。不幸的是，后端人员不允许我更改 HTML 结构，所以我将无法使用它。我没有在问题中说清楚，我现在将对其进行编辑。

【解决方案2】：

当我将你的 html 和 CSS 插入 jsFiddle 时看起来不错：http://jsfiddle.net/LAzUf/。你有萤火虫吗？输入标签看起来是不是继承了其他设置的样式？

【讨论】：

我现在正在查看萤火虫，看起来没有任何东西通过继承进行干扰。我会坚持下去，看看能不能找到什么。 - 编辑 - 您可以通过查看 Chrome 中的小提琴来查看我遇到的问题。
因此，当我将您的 line-height:131% 输入（以及 p）中时，它看起来就像在 Chrome 和 FF 中对齐。 jsfiddle.net/LAzUf/2是不是更像？