在它旁邊有一個浮動按鈕的css文本框

Question

我正在爲我的網站設計一個移動模板，我希望div中的文本框寬度爲：100％，旁邊有一個html提交按鈕，但按鈕總是顯示換到第二行。有人可以幫我解決這個問題嗎？

<style type="text/css"> 
    .form_input {} 
    .form_submit{} 
</style> 

<div> 
    <input type="text" name="s" value="" class="form_input" /> 
    <input type="submit" value="Search" class="form_submit" /> 
</div> 

Answer 1

包裝發生是因爲css box模型的運作。 100%表示上下文框的100％。所以輸入字段將完全填充行 - >提交按鈕必須換行到下一行。您可以爲輸入框指定一個寬度。 80％，提交按鈕寬度爲20％。

我想你真正想要做的就像輸入{width：100％ - 200px}，submit {width：200px}。這是不可能的與CSS 2。

Answer 2

將div設置爲position：relative;然後設置兩個文本框和提交按鈕的絕對位置：

div.box{ position:relative; } 

input[type="text"]{position:absolute;left:0;top:0;} 
input[type="submit"]{positon:absolute;right:0;top:0;} 

Answer 3

如果您設置文本框width: 100%;，那麼它會佔用全部可用空間，並且始終按提交按鈕下來。

此代碼指定的寬度爲兩個輸入元素：

.form_input { 
    width: 70%; 
} 
.form_submit{ 
    width: 20%; 
} 

，他們將在同一行上。 （70％+ 20％= 90％，因爲我留下了一點餘地）。