DuckDuckGo検索ボックスの画像を、その行の右側のテキストを左側に表示するにはどうすればよいですか？

Question

私はDuckDuckGo検索ボックスを左に、虫めがねの画像を右に、同じ行に表示したいと考えています。現時点では、私はdisplay: inlineにそれらをすべてラップしたにもかかわらず、1行にテキストを、その後に検索ボックスと画像を取得しています。どのように私は同じ行にそれらを得ることができますか？次のように私のコードは次のとおりです。

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>