开发者

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="&#x2713;" />
  </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/

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜