Question

我需要将输入文本字段和sumit按钮放在同一行。我尝试了很多东西，但没有任何效果。

表格：

<%= 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>。

中

Answer 1

您应该将display: inline或display: inline-block添加到input代码中。最简单的方法是添加这个css样式

input {
  display: inline;
}

这将在所有输入上应用inline，您可能需要对其进行优化。

Answer 2

我认为他们已经在同一行，见：

http://jsfiddle.net/hhzFd/

Answer 3

在评论中，您添加了您正在使用的jQuery Mobile。这似乎是问题的原因，因此明显的解决方案是停止使用它。但是如果由于某种原因需要它，请查看它如何影响表单字段宽度。 input元素有多宽？您可能需要将其设置得更小，例如

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

在同一行显示输入文本和提交按钮

3 个答案: