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改变了他原来的问题，我会把这个留在这里给那些正在寻找解决方案以在文本字段中插入魔法玻璃的人。

CSS - 不对齐的按钮

1 个答案: