把輸入提交到與輸入框相同的行上

這可能很簡單，但我不知道該怎麼做。目前使用此代碼時，「查找」按鈕位於輸入「位置」框下面的行上。如何像大多數搜索框一樣將它放在右側的同一行上？把輸入提交到與輸入框相同的行上

HTML

<div class="fieldwrapper"> 
<input id="field_location" class="field r2" placeholder="Town, City or Postcode" id="Postcode" name="Postcode" type="text" value=""><input type="submit" id="findbutton" value="Find" /> 
</div>

CSS

field { font-family:arial, sans-serif; border-color: #d9d9d9; border-top:solid 1px #c0c0c0; } 
input.field{width:100%}

鏈接 http://jsfiddle.net/VL3Dj/

來源

2012-10-12 James Willson

這將是巨大的，如果你把這個代碼http://jsbin.com或http： //jsfiddle.net以便其他人可以開始在適當位置修復代碼 –

好的！ http://jsfiddle.net/VL3Dj/ –

和另外一個按鈕，你可以做這樣的：My Fiddle

<input type="submit"value="Find" style="float: right" /> 
<div style="overflow: hidden; padding-right: .5em;"> 
    <input type="text" style="width: 100%;" /> 
</div>

來源

2012-10-12 12:25:37

這是我正在尋找的答案。謝謝。我不能標記爲5分鐘的答案。 –

@JamesWillson歡迎您:) –

我一直在爲此奮鬥多年。任何人都可以解釋爲什麼溢出：隱藏使它工作，爲什麼它沒有它的工作？ –

這是因爲你的輸入字段設置爲100％的寬度，不留空間butto在它旁邊。

這裏是AA固定的版本：如果你想讓你的文本框是100% widthhttp://jsfiddle.net/ThfES/1/

來源

2012-10-12 12:25:10

我猜他需要文本字段100％ –

@Alien也許他會 - 我的只是幾十個可能的建議之一。如果他更喜歡你的解決方案，那麼我相信他會將其標記爲答案。 –

是的，我想文本字段100％，抱歉。 –

...... ...... Demo

嗨現在加上這個CSS

.fieldwrapper{ 
white-space: nowrap; 
}

Live demo

來源

2012-10-12 12:26:43

您需要float塊元素，使他們出現並排側，可以這麼說。 inline像<a>和<span>這樣的元素默認爲這樣。瞭解有關CSS Box模型的更多信息。

您的解決方案：http://jsfiddle.net/HBJtT/

編輯：保持input字段100%寬。

潛在的解決方案：http://jsfiddle.net/3TZL8/

我不支持這種解決方案雖然，如果你保持輸入文本字段100%寬的動機是爲了讓按鈕和現場看看「無間」，你應該使用一個網格或者一個UI框架。我喜歡Foundation框架，一個可能的解決方案可以在這裏看到：http://foundation.zurb.com/docs/forms.php（向下滾動到「輸入一個後綴行動」爲例）

來源

2012-10-12 12:27:11

雖然它不適用於100％寬度的框：http://jsfiddle.net/HBJtT/5/ –

請參閱編輯。我不確定爲什麼要保持輸入元素100％的寬度，請您詳細說明一下嗎？謝謝。 –

嘗試以下，寬度：50％

input.field{width:50%}

來源

2012-10-12 12:28:18 Kaf

你可以這樣做這（在我的情況下工作）：

<div style="width:150px"><p>Start: <input type="text" id="your_id"></p> 
    </div> 

<div style="width:130px;margin-left: 160px;margin-top: -52px"> 
<a href="#" data-role="button" data-mini="true">Button</a> 
</div>

這裏是一個演示：http://jsfiddle.net/gn3qx6w6/1/

來源

2014-09-30 08:24:52

你只需要知道按鈕的寬度爲它工作。然後，你基本上給輸入一個完整的寬度和位置絕對按鈕的權利。該填充，所以沒有文字坐在後面的按鈕：

<form method="post" action=""> 
     <input type="text" name="search-str" id="search-str" value=""/> 
     <button type="submit">Submit</button> 
    </form>

對於CSS：

form { 
    position: relative; 
} 

input { 
    width: 100%; 
    padding-right: 40px; 
} 

button { 
    width: 40px; 
    position: absolute; 
    top: 0; 
    right: 0; 
}

來源

2014-11-19 11:37:18

把輸入提交到與輸入框相同的行上

回答

相關問題