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

Question

I want my submit button to the right of my search form. But I also want to keep my label above the form field. So this is Label, and then on a new line is a field with a 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 Page</label><input name="data[User][Search for a friend page]" type="text" id="UserSearchForAFriend&#039;sPage" /></div> <div class="submit"><input type="submit" value="Search" /></div></form> </div> 

Answer 1

Without changing your markup:

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

Here is a working example . I suggested that you only want styles to be applied in your form, so I prefix the rules with #UserDisplayForm .

Answer 2

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

Answer 3

I would do something simple:

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

Answer 4

The simplest change is to change the div tags to span tags and add a br break to go 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 Page </label> <br> <input name="data[User][Search for a friend page]" type="text" id="UserSearchForAFriend&#039;sPage" /> </span> <span class="submit"><input type="submit" value="Search" /></span> </form> </div> 

Or else you can make a shortcut in a separate div tag and text box and in a separate range as shown below.

Friend Search

Answer 5

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 the correct <div> float. You do not have to put them in a <span> to make it work, it's just lazy coding. Chuck in width in styles the way you want, and it should work. It really depends on the rest of your code / css.

Good luck