提交按鈕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

這是你如何編寫一個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 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

浮動提交按鈕的佈局看起來如預期。 http://jsfiddle.net/4HcWy/9/

Answer 4

關鍵是要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邊界。