Question

我正在尝试使用类似于Google Gmail的登录表单，其中电子邮件和密码文本框具有完全相同的宽度，但是当我无法正确使用按钮时。两者都具有相同的风格，但按钮显得较短，并且有一个左边距。

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

Answer 1

尝试申请：

-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/

查看box-sizing和非box-sizing之间的区别 http://jsfiddle.net/Davidicus/f5r3R/

使ASP文本框的宽度与Button宽度相同

1 个答案: