0

Web ページのボタンを正しく並べるのに問題があります。

これまでのところ、これは私が持っているものです:

http://img17.imageshack.us/img17/2209/capturekxh.png

<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;
}

私が抱えている問題は、「送信ボタン」がまだニュースレターのテキスト フィールドと一致していないことです。どんな助けでも大歓迎です！

4

1 に答える 1

0

前に述べたように、レイアウトにテーブルを使用しないでください。使用する必要がある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は元の質問を変更しました。テキストフィールド内に拡大鏡を挿入する解決策を探している人のために、これをここに残します。

于 2013-03-15T18:21:35.330 に答える