html - 列表项内的搜索栏

Question

我正在尝试在列表项中设计一个搜索栏。

 <li id="searchArea" style="width: 400px; float: none;">
 <span>     

  <img src="/ProfiletenModified/Images/searchicon18x18.png" style="
    height: 22px;
    margin-top: 5px;
    width: 22px;

    float: left;
  ">

  <input id="searchtextbox" type="text" autocomplete="off" style=" 
    border: 1px solid #fff;
  ">

  <span></span>
</span>
</li>

但问题是图像看起来离输入很远。他们都不太适合彼此。如何做到这一点？

Answer 1

正如 GCyrillus 所说，您需要使用 float: left 将两个元素(图像和文本输入) float 在一起.

看看这个 fiddle :http://jsfiddle.net/jdevfox/645qH/3/

全部没有<spam> --我的意思是<span>标签。 ;)