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

Question

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

这是代码：http: //jsfiddle.net/7zknq/1/

<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>

在此先感谢，鲍勃:)

Answer 1

这应该有效。

<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/

Answer 2

添加到按钮：

box-sizing: content-box;

从输入中删除额外的padding-bottom: 3px

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

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