提交按钮CSS不听？ [英] Submit button CSS not listening?

问题描述

我正在创建一个电子邮件表单，并希望文本框和提交按钮直接相邻。他们应该感动，使它看起来像一个连续的矩形。

I am creating an e-mail form and would like the text box and submit button to be directly next to each other. They should be touching so that it looks like one continuous rectangle.

然而，当我让他们触摸并设置一个高度提交按钮不听！它不保持相同的高度。如果我单独增加提交按钮高度，那么这两个框不会对齐！

However, when I get them touching and set a height the submit button doesn't listen! It doesn't stay the same height. If I increase the submit button height alone by a lot the two boxes are not aligned!

HTML：

HTML:

<div id="form">
    <input type="text" class="text-input" name="address" id="address" value="" size="23" maxlegnth="30" />
    <input type="submit" value="BUTTON" id="btn-submit" />
</div>

CSS：

CSS:

#form input{
    border: solid 2px #989898;
    font-family: 'lucida grande', tahoma, verdana, arial, sans-serif;
    outline:none;
    background: #d8d8d8;
    font-weight:bold;
    color: #525252;
    position: relative;
    height: 25px;
}
#address{
    text-align: right;
    margin: 0 30 0 auto;
}
#btn-submit{
    margin-left: -7px;
    width: 44px;
    text-align: center;
}

推荐答案

关键是< c $ c> float：left 输入然后为它们设置高度。现场示例： http://jsfiddle.net/NweS6/

The key is to float:left the inputs and then set a height for them. Live example: http://jsfiddle.net/NweS6/

#form input{
    border: solid 2px #989898;
    font-family: 'lucida grande', tahoma, verdana, arial, sans-serif;
    outline: none;
    background: #d8d8d8;
    font-weight: bold;
    text-align: right;
    color: #525252;
    float: left;
    height: 25px;
}

#form #btn-submit{
    margin-left: -2px;
    width: 44px;
    text-align: center;
    height: 29px;
}

提交需要比输入值高4px的原因是因为某些因为它没有将按钮上的边框带入帐户，其顶部和底部加起来为4px。

The reason the submit needs a figure 4px higher than the input is because for some reason it does not take into the account the border on the button, which top and bottom adds up to 4px.

这篇关于提交按钮CSS不听？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！