列表项内的搜索栏

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将两个元素（图像和文本输入）一起浮动。

看到这个小小提琴：http://jsfiddle.net/jdevfox/645qH/3/

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