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和Yahoo文本大小。

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

由于

编辑 - 我无法更改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/时看起来不错。你有Firebug吗？看起来输入标签是从其他设置继承样式吗？

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

2 个答案: