CSS表单输入提交按钮的高度不正确?
我正在创建一个简单的表单,我无法获得与文本框高度相同的提交按钮。当我向提交按钮添加高度时,它将整个表单向下移动。我错过了什么?CSS表单输入提交按钮的高度不正确?
下面是代码: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>
在此先感谢,鲍勃:)
这应该工作。
<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>
行高不需要,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
删除输入和按钮具有不同的继承框大小。
按钮比这个输入大。 – 2013-04-30 20:09:59
从Chrome浏览器正常运行。对于其他浏览器,供应商前缀可能适用。我正在处理这个问题的核心问题。该按钮和输入没有公社箱模型。 – Mircea 2013-04-30 21:29:57
井按钮应该有文本在中间(高度),这与文本位于基线的想法相冲突。特别是内联块或内联元素,如果没有设置padding,会造成麻烦,否则正常的填充将从dom模型的按钮继承。按钮可以使用完整的盒子模型空间,因此文本不会覆盖边框。但确切地说,这是可能的文字。所以它不能有相同的boxmodel。因此需要填充填充以覆盖此差异 – 2013-04-30 21:41:32
给'输入{线高度:...}'通过CSS,输入元件是显示:内联块或内联,从而可以改变行为 – 2013-04-30 19:34:52
尝试这个http://jsfiddle.net/uNRkm/ – PSL 2013-04-30 19:45:11