按钮和表单之间没有换行符

【问题标题】：no line break between button and form按钮和表单之间没有换行符
【发布时间】：2012-02-25 09:29:34
【问题描述】：

如何在同一行中获取按钮和表单元素而不发生换行？非常感谢！

  <button>ask question</button>
<form action="/search" method="get">
    <input type="text" name="q" value="{SearchQuery}"/>
    <input type="submit" value="Search"/>
    </form>

【问题讨论】：

标签： html forms button

【解决方案1】：

在您的表单上使用此 CSS 样式：style="display: inline;"。

<form action="/search" method="get" style="display: inline;">

这是demo on JSBin。

【讨论】：

【解决方案2】：

您可以将按钮设为浮动：

<button style="float: left;">ask question</button>

【讨论】：

这也适用于表单，而接受的答案不起作用。

【解决方案3】：

<button> 和 <form> 都是块级元素。您需要使它们与 CSS display: inline 内联。不确定这是否是您的意思。这也取决于您更广泛的 HTML。

【讨论】：

【解决方案4】：

输入字段是块级元素。您可以更改 CSS 中的显示规则：

input { display: inline; }

【讨论】：

【解决方案5】：

你可以浮动：离开按钮和表单

【讨论】：

【解决方案6】：

用于在输入框后添加新行，然后在您的 css 文件中添加 add -> input { display: block; }

【讨论】：