在同一行顯示輸入文本和提交按鈕

我需要將輸入文本字段和提交按鈕放在同一行上。我嘗試了很多東西，但沒有成功。在同一行顯示輸入文本和提交按鈕

形式：

<%= form_tag("/recherche", :method => "get") do %> 
    <%= search_field_tag :recherche, params[:recherche] %> 
    <%= submit_tag "Recherche", :name => nil, :id => "submit"%> 
<% end %>

主要生產：

<form accept-charset="UTF-8" action="/recherche" method="get"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="&#x2713;" /></div> 
    <input id="recherche" name="recherche" type="search" /> 
    <input id="submit" type="submit" value="Recherche" /> 
</form>

我不知道用什麼CSS ...我試圖用浮動，顯示器等

僅供參考，表格被包裹在<li>中。

來源

2012-03-17 Justin D.

在評論中，您補充說您正在使用jQuery Mobile。這似乎是問題的原因，所以明顯的解決辦法是停止使用它。但是，如果您出於某種原因需要它，請查看它是如何影響您的表單字段寬度的。 input元素有多寬？您可能需要將其設置得更小，例如

<style> 
#recherche { width: 15em; } 
</style>

來源

2012-03-18 07:09:14

我認爲他們已經在同一行，請參閱：

http://jsfiddle.net/hhzFd/

來源

2012-03-17 22:56:09

我正在使用jQuery Mobile，因此它已被預先格式化。 – 2012-03-17 23:11:15

您應該display: inline或display: inline-block添加到您的input標籤。最簡單的方法是添加這個CSS樣式

input { 
    display: inline; 
}

這將適用於inline上的所有投入，你可能需要加以改進。

來源

2012-03-17 22:58:01 Baldrick

我正在使用JQuery移動。你的代碼不起作用，但我不知道爲什麼。 – 2012-03-17 23:10:51

在同一行顯示輸入文本和提交按鈕

回答

相關問題