css – 如何对齐输入字段和提交按钮(还有以下区别：IE,FFox,Chrome)？

我有CSS的样式表单域的问题。如下所示，我试图获得一个输入字段，然后在右边提交提交按钮。但是由于某些原因，我无法让他们在任何浏览器上正确对齐，也不能让他们至少看起来一样，当我放大时，一切都会变坏！

我试过“line-height：normal！important”解决方案，但这似乎也不起作用

我究竟做错了什么？

IE7(xp)

FFox(linux)

Chrome(linux)

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：

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

解决方法

这是在FF，IE8和Chrome在XP上对我有用的

#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;
}

我删除了#form_Box div上的CSS，设置vertical-align：bottom并在文本框上调整了高度。

原文地址：https://www.jb51.cc/css/219812.html