送信ボタンCSSが聞こえませんか？

Question

私は電子メールフォームを作成しており、テキストボックスと送信ボタンを直接隣に配置したいと考えています。彼らは1つの連続する長方形のように触れる必要があります。

しかし、私はそれらをタッチし、高さを設定すると、送信ボタンは聞いていない！それは同じ高さに留まらない。送信ボタンの高さを単独で大きくすると、2つのボックスが揃っていません。

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

これは、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> 

そして、その内部の要素はそれを知っていますa form、ただ他ではないdiv。

EDIT：ご迷惑をおかけして申し訳ありません。私は聞いて、間違って表示するのではなく、誤った動作をしていると思った。

フォローイングのようにしたいですか？ 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 inputに#form inputを変更しなければならなかったform要素を使用していたからです。）*

Answer 2

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> 

Answer 3

フロートは、ボタンを提出し、期待通りのレイアウトになります。

Answer 4

キーはfloat:leftに入力してから、高さを設定します。ライブ例：何らかの理由で、それは上部と下部が4PXまで追加ボタン、上の考慮に国境をとらないので、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を提出です。