如何显示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>