使ASP文本框的寬度與按鈕寬度相同

我正在嘗試使用與Google Gmail類似的格式創建日誌，其中電子郵件和密碼文本框具有完全相同的寬度，但當我無法正確使用按鈕時尤其如此。兩者都有相同的風格，但按鈕看起來更短，並有餘裕。使ASP文本框的寬度與按鈕寬度相同

ASP.Net標記

<div class="loginWindow"> 
       <asp:Login ID="Login1" runat="server" RenderOuterTable="False"> 
        <LayoutTemplate> 
         <asp:TextBox ID="UserName" placeholder="Username" runat="server" CssClass="Logintextbox"></asp:TextBox> 
         <asp:RequiredFieldValidator ID="UserNameRequired" runat="server" ControlToValidate="UserName" ErrorMessage="User Name is required." ToolTip="User Name is required." ValidationGroup="Login1" ForeColor="White">*</asp:RequiredFieldValidator> 
         <asp:TextBox ID="Password" placeholder="Password" runat="server" TextMode="Password" CssClass="Logintextbox"></asp:TextBox> 
         <asp:RequiredFieldValidator ID="PasswordRequired" runat="server" ControlToValidate="Password" ErrorMessage="Password is required." ToolTip="Password is required." ValidationGroup="Login1" ForeColor="White">*</asp:RequiredFieldValidator> 
         <asp:Button ID="LoginButton" CssClass="Loginbutton" runat="server" CommandName="Login" Text="Log In" ValidationGroup="Login1" /> 
         <asp:Literal ID="FailureText" runat="server" EnableViewState="False"></asp:Literal> 
         <asp:ValidationSummary ID="ValidationSummary1" CssClass="ValidationSummary" runat="server" ValidationGroup="Login1"></asp:ValidationSummary> 
        </LayoutTemplate> 
       </asp:Login> 
      </div>

CSS：

.loginWindow { 
     height: 340px; 
     width: 300px; 
     outline: 1px solid #e2e2e2; 
     border: none; 
     padding: 15px 25px 15px 25px; 
     margin: auto; 
     position: absolute; 
     top: 0; 
     left: 0; 
     bottom: 0; 
     right: 0; 
     overflow: auto; 
    } 

    .Logintextbox { 
      border: 1px solid #e2e2e2; 
      display: inline; 
      padding: 5px 10px 5px 10px; 
      margin:0; 
      width: 220px; 
      height:30px; 
    } 

    .Loginbutton { 
      border: 1px solid #e2e2e2; 
      display: inline; 
      padding: 5px 10px 5px 10px; 
      margin:0; 
      width: 220px; 
      height:30px; 
    }

來源

2014-01-08 Marmar

'顯示器之間的差：內聯塊;' – Abhitalks

嘗試應用：

-moz-box-sizing: border-box; 
-webkit-box-sizing: border-box; 
box-sizing: border-box;

您的所有元素。它使得元素的填充和邊框被添加，而不會導致整體寬度的增加。輸入通常以默認方式呈現，但ASP呈現的輸入可能有所不同。試着至少排除這一點。

http://css-tricks.com/box-sizing/

http://www.paulirish.com/2012/box-sizing-border-box-ftw/

退房箱上漿和無箱上漿 http://jsfiddle.net/Davidicus/f5r3R/

來源

2014-01-10 19:35:33 Davidicus

使ASP文本框的寬度與按鈕寬度相同

回答

相關問題