html - 如何将提交图像放入搜索栏的输入表单中？

Question

我的网站上有一个搜索栏，如图所示，我想将“开始”图像放在“快速搜索”输入栏中。有什么办法可以通过 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 中添加一个负的 margin-left 以将其向左移动到足以显示在框内的位置。

2. 您可以使用 CSS 使外部 DIV 看起来像带边框的文本框，然后在内部有一个没有边框的文本框和按钮。因此，从视觉上看，DIV 的边框看起来像是文本框的边框，但实际上并非如此。