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

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>

---

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.

---

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

---

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>

---

The simplest ting to do is to change the inner div tags to span tags and add a br break to get to the next 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>
        <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 div tag and the textbox and button in separate span tags as shown below.

Search For A Friend's Page

---

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 not have 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.

Good luck!