CSS 如何对齐输入字段和提交按钮（也有区别：IE、FFox、Chrome）？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5073766/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I align input field and submit button (also differences between: IE, FFox, Chrome)?
提问by o1iver
I am having problems styling form fields with CSS. As you can see below I am trying to get an input field and then to its right the submit button. However for some reason I can't get them to align correctly on any browser, nor can I get them to at least look the same in them and finally everything goes bad when I zoom as well!
我在使用 CSS 样式化表单字段时遇到问题。正如您在下面看到的，我正在尝试获取一个输入字段，然后在其右侧找到提交按钮。但是由于某种原因，我无法让它们在任何浏览器上正确对齐，也无法让它们至少在它们中看起来相同，最后当我缩放时一切都变糟了！
I have tried the "line-height:normal !important;" solution, but that doesn't seem to work either...
我试过“行高：正常！重要；” 解决方案，但这似乎也不起作用......
What am I doing wrong?
我究竟做错了什么？
IE7 (xp)
IE7 (xp)
FFox (linux)
FFox (Linux)
Chrome (linux)
铬 (Linux)
CSS (nothing for subscribe_form):
CSS（subscribe_form 没有）：
#form_box {
position: relative;
height: 35px;
top: 7px;
left: 20px;
}
#subscribe_email {
border: solid 1px #CCC;
height: 24px;
width: 250px;
font-size: 15px;
color: #999;
padding-left: 5px;
}
#subscribe_submit {
position: relative;
border: solid 1px #CCC;
height: 25px;
width: 115px;
color: white;
}
HTML:
HTML：
<div id="box2" class="tbox">
<div id="form_box">
<form id="subscribe_form" action="subscribe" method="post">
Sign Up:
<input class="tbox" id="subscribe_email" type="text" name="email" value="email address" />
<input class="tbox" id="subscribe_submit" type="submit" value="Subscribe" />
</form>
</div>
</div>
回答by Chris Broski
Here is what works for me in FF, IE8 and Chrome on XP
这是在 FF、IE8 和 XP 上的 Chrome 中对我有用的方法
#subscribe_email {
border: solid 1px #CCC;
height: 21px;
width: 250px;
font-size: 15px;
color: #999;
padding-left: 5px;
vertical-align: bottom
}
#subscribe_submit {
border: solid 1px #CCC;
height: 25px;
width: 115px;
color: white;
}
I removed CSS on the #form_box div, set vertical-align:bottom and tweaked the height on text box.
我删除了 #form_box div 上的 CSS，设置了 vertical-align:bottom 并调整了文本框的高度。
回答by martincarlin87
you should try floating them both left, that way they will position themselves.
您应该尝试将它们都向左浮动，这样它们就会定位自己。
回答by Poonam
before aplying any css make all margin and padding zero by default all browser as thr own margin and padding by making it zero and then applying ur style it affects eventually
在应用任何 css 之前，默认情况下将所有边距和填充为零，将所有浏览器作为自己的边距和填充，使其为零，然后应用它最终影响的您的样式
