图标未嵌入搜索栏并位于div之外

Question

我有一个搜索栏，我正在尝试嵌入一个字体真棒图标，但它似乎没有被包装在容器div中

这是一张图片，显示当前图标的位置，我想要搜索图标

非常感谢任何帮助，谢谢

CSS：

 @import url("//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css");


    .searchbar{
            position:relative;

        }

        .searchbar input { text-indent: 32px;}
        .searchbar .fa-search { 
          position: absolute;
          top: 10px;
          left: 10px;
            color: #4f5b66;

        }

.search_field {
    min-width: 270px;
    width: 65%;
    height:40px;
    font-size: 2em;
    behavior: url(js/PIE.htc);
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
    margin-right: -4px;
    margin-top: 10px;
    float:right;
}

HTML：

<div class="searchbar">
   <form method="GET" action="search.php" style= "padding: 1px; font-family: Tahoma, Geneva, sans-serif;">
                <span class="fa fa-search fa-lg"></span>
                <input type="text" name="search" class="search_field" value="<?php echo $_GET['search']; ?>" id="search" maxlength="20" />
                <input type="hidden" name="start" value="0" />
                <input type="hidden" name="limit" value="10" />
    </form>
</div>

Answer 1

您应该将输入包装在div上，将DIV准确定位到您希望文本输入的位置，然后将DIV设置为相对位置。同时将您的图标放在此DIV中。

另外请注意，如果您的ICON应该可以点击以进行提交，请不要​​使用span，要么使用'button'标签，要么使用实际的输入类型：submit