no line break between button and form

Question

How do I get a button and a form element in the same line without a linebreak happening? thank you very much!

  <button>ask question</button>
<form action="/search" method="get">
    <input type="text" name="q" value="{SearchQuery}"/>
    <input type="submit" value="Search"/>
    </form>

Solution 1

Use this CSS style: style="display: inline;" on your form.

<form action="/search" method="get" style="display: inline;">

Here's a demo on JSBin.

Solution 2

both <button> and <form> are block level elements. you'd need to make them inline with CSS display: inline. not sure if that's what you mean. also it depends on your broader HTML.

Solution 3

You could make the button a float:

<button style="float: left;">ask question</button>

Solution 4

Input fields are block-level elements. You can change the display rules in CSS:

input { display: inline; }

Solution 5

You can float: left both the button and the form

View more solutions

Comments

[3xCh1_23]

This also works for a form, while the accepted answer did not work.