style text input and submit button as inline
I would like to ask you for a hint, how to style my text input and submit button that will be inline, especially - my pattern looks this:
And the reality this
In code I have:
<form accept-charset="UTF-8" action="/home/index" method="post">
<div style="margin:0;padding:0;display:inline">
<input name="utf8" type="hidden" value="✓" />
</div>
&l开发者_如何学编程t;input class="search" data-autocomplete="/home/autocomplete_produkties_nazev" id="name" name="nazev" type="text" value="" />
<input src="/images/search_btn.jpg?1308243954" type="image" />
</form>
And in CSS:
input.search {
padding: 6px;
width: 500px;
font-size: 15px;
border: 2px solid #cfcfcf;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
background-image: url('/images/xxx.png');
background-repeat: repeat-x;
height: 61px;
}
I am trying to get and how to repair, that the submit button is always above than text-input button... I don't know, where could be a problem... could be someone give me some tips or hint, how to place on the same line text-input and submit button?
Thank you
You could try floating the search input left and the submit button right: http://jsfiddle.net/ianoxley/FEQhb/1/
精彩评论