html - CSS - 按钮不对齐

Question

我在让按钮为我的网页正确排列时遇到问题。

到目前为止，这就是我所拥有的：

<div class="containerBoxes">                                        
   <div class="search">
       <form id="search-form" action="search.aspx" method="GET" accept-charset="utf-8" class="navbar-form" style="height:35px; width:100%" >
       <input type="text" name="s" onblur="if(this.value=='') this.value=''" onfocus="if(this.value =='' ) this.value=''"  />
       <a href="#" onclick="document.getElementById('search-form').submit()"></a>
       </form>
   </div>


   <form id="Form1" runat="server">
        <asp:ToolkitScriptManager ID="scrpMngMaster" runat="server">
        <Scripts>
          <asp:ScriptReference Path="~/js/jquery.js"/>
          <asp:ScriptReference Path="~/js/jquery.easing.1.3.js"/>
          <asp:ScriptReference Path="~/js/camera.js"/>
          <asp:ScriptReference Path="~/js/jquery.ui.totop.js"/>
          <asp:ScriptReference Path="~/search/search.js"/>                        
          <asp:ScriptReference Path="~/js/google.js"/>
          <asp:ScriptReference Path="~/js/livechat.js"/>  
          <asp:ScriptReference Path="~/js/bootstrap.js"/>  
        </Scripts>
        </asp:ToolkitScriptManager>    

  <div class="newsletter">                               
    <input type="text" runat="server" id="inputNewsletterEmail" onfocus="if(this.value =='Newsletter Sign Up - Enter Email' ) this.value=''" onblur="if(this.value=='') this.value='Newsletter Sign Up - Enter Email'" value="Newsletter Sign Up - Enter Email" style="background-color:#232323; width:95%;" />
    <asp:RegularExpressionValidator  
        ID="regEmail"
        ControlToValidate="inputNewsletterEmail"
        Text="(Invalid email)"
        ValidationExpression="\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*"
        Runat="server" />
        <asp:Button id="btnNewsletter" runat="server" class="btn btn_" Text="subscribe" OnClick="btnNewsletter_OnClick" />
        <asp:Label ID="lblSuccess" runat="server" Visible="false" ForeColor="#97D816" Font-Bold="true" Font-Size="12px"></asp:Label>
   </div>


 </form>
</div>

CSS：

.containerBoxes
{
  float:right;
}

我遇到的问题是“提交按钮”仍然没有与时事通讯文本字段对齐。任何帮助将不胜感激！

Answer 1

如前所述，不要在布局中使用表格，唯一需要使用table的时候是需要表格时（有意义，不是吗？）您需要的是：

HTML

<div class="search">
    <input type="text" />
    <img src="glass.png" />
</div>

CSS

.search{
    position:relative;
}
input{
    padding-left:30px;
}
img{
    position:absolute;
    top:5px; /* adjust value so it looks right */
    left:300px; /* adjust value so it looks right */
    z-index:100;
}

编辑：OP改变了他原来的问题，我会把这个留给任何正在寻找在文本字段中插入放大镜的解决方案的人。