Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

Tags:

html

css

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>
like image 289
helen highwater Avatar asked Jul 04 '11 22:07

helen highwater


1 Answers

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.

like image 97
robertc Avatar answered Oct 27 '22 13:10

robertc