Как я могу отобразить окно поиска DuckDuckGo с изображением справа от той же строки, что и текст слева?

Question

Я хотел бы показать окно поиска DuckDuckGo с текстом влево, а изображение с увеличительным стеклом справа, все на одной линии. На данный момент я получаю текст на одной строке, а затем окно поиска и изображение на следующем, хотя я их завернул в display: inline. Как я могу получить их в одной строке? Мой код выглядит следующим образом:

form input[type="text"] { 
 
    height: 16px; 
 
    width: 200px; 
 
    margin-left: 24px; 
 
    font-size: 13px; 
 
    -webkit-border-radius: 5px; 
 
    -moz-border-radius: 5px; 
 
    border-radius: 5px; 
 
    border: 1px solid #000; 
 
    vertical-align: top; 
 
    maxlength="255"; 
 
} 
 

 
.display-inline {display:inline; }

<div class="display-inline">text 
 
<form method="get" id="search" action="http://duckduckgo.com/"> 
 
<input type="hidden" name="sites" value="foobar.com"/> 
 
<input type="hidden" name="k8" value="#000000"/> 
 
<input type="hidden" name="k9" value="#0000ff"/> 
 
<input type="hidden" name="kaa" value="#880088"/> 
 
<input type="hidden" name="kt" value="a"/> 
 
<input type="text" name="q" maxlength="255" placeholder="&nbsp;..."/> 
 
&nbsp;<img src="images/image.gif" height="20" width="20"> 
 
</div>

Answer 1

Форма является блочным по умолчанию.

form { 
 
    display: inline-block; 
 
    vertical-align: middle; 
 
} 
 
form > input[type="text"] { 
 
    height: 16px; 
 
    width: 200px; 
 
    margin-left: 24px; 
 
    font-size: 13px; 
 
    -webkit-border-radius: 5px; 
 
    -moz-border-radius: 5px; 
 
    border-radius: 5px; 
 
    border: 1px solid #000; 
 
    vertical-align: top; 
 
}

<div>text 
 
    <form method="get" id="search" action="http://duckduckgo.com/"> 
 
    <input type="hidden" name="sites" value="foobar.com" /> 
 
    <input type="hidden" name="k8" value="#000000" /> 
 
    <input type="hidden" name="k9" value="#0000ff" /> 
 
    <input type="hidden" name="kaa" value="#880088" /> 
 
    <input type="hidden" name="kt" value="a" /> 
 
    <input type="text" name="q" maxlength="255" placeholder=" ..." /> 
 
    <input type="image" src="/favicon.ico" height="20" width="20" /> 
 
    </form> 
 
</div>