Html 如何让提交按钮与表单字段在同一行？

How can I get the submit button to be on the same line as the form field?

提问by helen highwater

I want to have my submit button to the right of my search form. But I also want to keep my label above the form field. So it's Label, then on a new line the field with the search button on the same line.

我想让我的提交按钮位于我的搜索表单的右侧。但我也想将我的标签保留在表单字段上方。所以它是标签，然后在同一行上的一个新行与搜索按钮的字段。

<div class="searchForm">
<form id="UserDisplayForm" method="post" action="/sponster/users/display" accept-charset="utf-8">
<div style="display:none;"><input type="hidden" name="_method" value="POST" /></div>
<div class="input text"><label for="UserSearchForAFriend'sPage">Search For A Friend's Page</label><input name="data[User][Search for a friend's page]" type="text" id="UserSearchForAFriend&#039;sPage" /></div>
<div class="submit"><input type="submit" value="Search" /></div></form> 
</div>

采纳答案by robertc

Without changing any of your markup:

无需更改任何标记：

#UserDisplayForm label { display: block; }
#UserDisplayForm div { display: inline-block; }

Here's a working example. I've assumed you want the styles to apply only within your form, hence I've prefixed the rules with #UserDisplayForm.

这是一个工作示例。我假设您希望样式仅在您的表单中应用，因此我在规则前面加上了#UserDisplayForm.

回答by Ted Hopp

Put your <label...>and <input...>tags inside <span...>instead of <div...>

把你的<label...>和<input...>标签放在里面<span...>而不是<div...>

回答by Claudio

I'd do something simple like:

我会做一些简单的事情，比如：

<... previous elements ...>
<div class="row"> <!-- this is semantically a "form row" -->
   <label style="display: block" ...></label>
   <input type="text"...>
   <input type="submit" ...>
</div>

回答by Gautham

The simplest ting to do is to change the inner divtags to spantags and add a brbreak to get to the next line.. :)

最简单的做法是将内部div标签更改为span标签并添加一个br分隔符以转到下一行.. :)

<div class="searchForm">
    <form id="UserDisplayForm" method="post" action="/sponster/users/display"
            accept-charset="utf-8">
        <div style="display:none;">
            <input type="hidden" name="_method" value="POST" />
        </div>
        <span class="input text">
            <label for="UserSearchForAFriend'sPage">Search For A Friend's Page
            </label>
            <br>
            <input name="data[User][Search for a friend's page]" type="text" 
                    id="UserSearchForAFriend&#039;sPage" />
        </span>

        <span class="submit"><input type="submit" value="Search" /></span>
    </form> 
</div>

Or else you could make the label reside in a separate divtag and the textboxand buttonin separate spantags as shown below.

或者，您可以将标签放在单独的div标签中，将文本框和按钮放在单独的span标签中，如下所示。

搜索朋友的页面

回答by Kate

Try this stylesheet:

试试这个样式表：

.searchForm {
    clear: both;
    display: block;
    width: 150px; /* whatever width you want it to be */
}
    .searchForm .input {
        display: block;
        float: left;
        margin: 0 10px 0 0;
        width: 100px; /* whatever width you want it to be */
    }
        .searchForm .input label { display: none; /* generally people don't want their label showing when making a search field */
        .searchForm .input input { display: block; ... and any other styles ... */

    .searchForm .submit {
        display: block;
        float: right;
        margin: 0 0 0 10px;
        width: 30px; /* again, whatever width you want it */;
    }

This is making the <div>'s float properly. You do nothave to put them in <span>'s to make it work, that's just lazy coding. Chuck in your widths in the styles to whatever you want them to be, and it should work. It really depends on the rest of your code/css.

这使<div>'s 正确浮动。您不必将它们放入<span>'s 中以使其工作，这只是懒惰的编码。将样式中的宽度调整为您想要的任何样式，它应该可以工作。这真的取决于你的代码/css 的其余部分。

Good luck!

祝你好运！