如何对齐输入字段和提交按钮(以及IE，FFox，Chrome之间的区别)? [英] How do I align input field and submit button (also differences between: 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和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;
}

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

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!

I have tried the "line-height:normal !important;" solution, but that doesn't seem to work either...

What am I doing wrong?

IE7 (xp)

FFox (linux)

Chrome (linux)

CSS (nothing for 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>

解决方案

Here is what works for me in FF, IE8 and Chrome on 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;
}

I removed CSS on the #form_box div, set vertical-align:bottom and tweaked the height on text box.

这篇关于如何对齐输入字段和提交按钮(以及IE，FFox，Chrome之间的区别)?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！