提交按钮 CSS 不听？

Question

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

但是，当我让它们触摸并设置高度时，提交按钮不听！它不会保持相同的高度。如果我将提交按钮的高度单独增加了很多，两个框不会对齐！

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：

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

Answer 1

关键是float:left 输入，然后为它们设置高度。实例：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。

Answer 2

浮动提交按钮，布局将按预期显示。 http://jsfiddle.net/4HcWy/9/

Answer 3

这是您编写 HTML 表单的方式：

<form method="POST" action"/page/to_post_to" >
    <input type="text" class="text-input" name="address" id="address" value="" size="23" maxlegnth="30" />
    <input type="submit" value="BUTTON" id="btn-submit" />
</form>

那么它里面的元素就知道它是一个form，而不仅仅是另一个div。

编辑：对不起，我看错了你的问题。我认为倾听意味着它的行为错误而不是显示错误。

你想让它看起来像下面这样吗？ http://jsfiddle.net/4HcWy/6/

form input
{
    border:2px solid #989898;
    font-family: 'lucida grande', tahoma, verdana, arial, sans-serif;
    outline:none;
    background: #d8d8d8;
    font-weight:bold;
    color: #525252;
    position:relative;
    height: 25px;
    box-sizing: border-box;
}

#address{
    text-align:right;
    margin:0 30 0 auto;
    border-right: none;
}
#btn-submit{
    margin-left: -7px;
    width:44px;
    text-align:center;
    border-left: none;
}

（另外，由于我使用了form 元素，我不得不将#form input 更改为form input。）*

Answer 4

输入和按钮好像不能用 2 像素，但是用 1 像素边框就可以了。

看：http://jsfiddle.net/qwLV7/

更新

这似乎可行，但我不得不修改按钮的高度以高于输入，

http://jsfiddle.net/qwLV7/1/

更新 2

现在怎么样了？

http://jsfiddle.net/qwLV7/2/

CSS

#form1
{
    border:solid 2px #989898;
    font-family: 'lucida grande', tahoma, verdana, arial, sans-serif;
    background: #d8d8d8;
    font-weight:bold;
    color: #525252;
    position:relative;
    width:194px;
}

input{
  height:25px;
  border:0px;
}

#address{
    text-align:right;
    margin:0 30 0 auto;
    float:left;
    width:150px;
}

#btn-submit{
    width:44px;
    text-align:center;
    float:left;
}

HTML

<div id="form1">
    <input type="text" class="text-input" name="address" id="address" value="" size="23" maxlegnth="30" />
    <input type="submit" value="BUTTON" id="btn-submit" />
    <div style="clear:both"></div>
</div>