如何将提交图像放入搜索栏的输入形式？

Question

我的网站上有一个搜索栏，如图所示，我想将“go”图像放在“快速搜索”输入栏中。有什么方法可以通过CSS来做到这一点吗？

以下是该搜索栏部分的代码：

<div style="float:right; width:50%">
<div class="row">
<div class="col-lg-6" style="float:right">
  <div class="form-group">
    <div class="input-group input-group-hg input-group-rounded">
        <asp:TextBox ID="searchBar" runat="server" TextMode="SingleLine" CssClass="form-control" placeholder="Quick Search" Width="200" Height="30px" AutoCompleteType="Disabled" />   
      <span class="input-group-btn">
         <a href="#" id="search" style ="right:10px;"><img src="images/go.png" /></a>
      </span>             
    </div> <br />
          </div>
  </div>
</div>

Answer 1

因此，有几种方法可以做到这一点：

1. 您可以在按钮的CSS中添加一个负边距，将其向左移动，使其显示在框内。

2. 您可以使用CSS使外部DIV看起来像带边框的文本框，然后在内部有一个没有边框的文本框和按钮。所以在视觉上它看起来像DIV的边框是文本框的边框，而实际上它不是。