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 改变了他原来的问题，我会把它留在这里，供任何正在寻找将 magifiying 玻璃插入文本字段的解决方案的人使用。