CSS表单输入提交按钮的高度不正确？

我正在创建一个简单的表单，我无法获得与文本框高度相同的提交按钮。当我向提交按钮添加高度时，它将整个表单向下移动。我错过了什么？CSS表单输入提交按钮的高度不正确？

<style type="text/css"> ::-webkit-input-placeholder { color: #acacac; } input { margin: 0; }</style> 
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300' rel='stylesheet' type='text/css'> 
<form style="padding:0; margin:0;"> 
<div style="font-family: 'Open Sans', sans-serif; color:#848484; line-height:36px;"> 
Testing a form, padding is off on submit button! 
<input style="display:inline; background-color:#CCC; border:none; height:36px; width:146px; padding-bottom:3px;" type="text" name="name" /> 
<input style="display:inline; background-color:#CCC; border:none; height:36px; width:146px; padding-bottom:3px;" type="text" name="name" /> 
<input style="display:inline; background-image:none; background-color:#30aa13; border:none; color:#fff; height:36px; font-size:16px;" value="GO" type="submit" /> 
</div> 
</form>

在此先感谢，鲍勃:)

来源

2013-04-30 bob32

给'输入{线高度：...}'通过CSS，输入元件是显示：内联块或内联，从而可以改变行为 – 2013-04-30 19:34:52

尝试这个http://jsfiddle.net/uNRkm/ – PSL 2013-04-30 19:45:11

这应该工作。

<link href='http://fonts.googleapis.com/css?family=Open+Sans:300' rel='stylesheet' type='text/css'> 
<style> 
body {padding:0px; margin:0px;} 
form { 
    padding:0px 1px 2px 7px; 
    margin:2px 0px 2px 0px; 
    border-bottom:#CCC dotted 1px; 
} 
form div { 
    font-family: 'Open Sans', sans-serif; 
    color:#848484; 
    line-height:36px; 
    display:inline; 
} 
::-webkit-input-placeholder { color: #acacac; } 
input { 
    margin:0px 1px; 
    padding:0px; 
    border:none; 
    background-color:#CCC; 
    height:36px; 
    width:137px; 
    vertical-align:bottom; 
    font-size:16px; 
} 
input[type=submit]{ 
    background:#30aa13; 
    color:#fff; 
    width: inherit; 
    padding:0px 7px; 
} 
</style> 
<form action="javascript:return false;"> 
    <div>form which is not in form, makes fun!</div> 
    <div style="float:right"> 
     <input type="text" name="name" /> 
     <input type="text" name="name2" /> 
     <input value="GO" type="submit" /> 
    </div> 
</form>

http://jsfiddle.net/7zknq/43/

screenshot from jsfiddle with firefox

来源

2013-04-30 19:50:49

行高不需要，skusi，你的填充只用于文本输入是问题！ :) – 2013-04-30 20:02:52

感谢您花时间来创建这个。我希望表单与文本在同一行，并且当我使用您的代码并将float：left或display inline添加到表单时，它仍然显示在文本下方。另外，在FF中，Go按钮仍然在文本字段上方显示1px。 – bob32 2013-04-30 21:48:16

在Firefox这需要'+“输入{vertical-align：bottom;}” – 2013-04-30 21:54:31

添加到按钮：

box-sizing: content-box;

从投入额外的padding-bottom: 3px

删除输入和按钮具有不同的继承框大小。

http://jsfiddle.net/PY7nn/5/

来源

2013-04-30 19:37:27 Mircea

按钮比这个输入大。 – 2013-04-30 20:09:59

从Chrome浏览器正常运行。对于其他浏览器，供应商前缀可能适用。我正在处理这个问题的核心问题。该按钮和输入没有公社箱模型。 – Mircea 2013-04-30 21:29:57

井按钮应该有文本在中间（高度），这与文本位于基线的想法相冲突。特别是内联块或内联元素，如果没有设置padding，会造成麻烦，否则正常的填充将从dom模型的按钮继承。按钮可以使用完整的盒子模型空间，因此文本不会覆盖边框。但确切地说，这是可能的文字。所以它不能有相同的boxmodel。因此需要填充填充以覆盖此差异 – 2013-04-30 21:41:32

CSS表单输入提交按钮的高度不正确？

回答

相关问题