Question

这是我的表单布局：

    <body>
        <p>Note that this form doesn't actually do anything 
        except illustrate the Required Field Validator.</p>

        <form id="frmValidator" method="post" runat="server">
            Usuario:
            <asp:TextBox id="txtUserName" runat="server" />
            <asp:RequiredFieldValidator id="userNameValidator" ControlToValidate="txtUserName" ErrorMessage='<img src="../Images/no.png">' runat="server" />

            <br />

            Contrasena:
            <asp:TextBox id="txtPassword" runat="server" />
            <asp:RequiredFieldValidator id="passwordValidator" ControlToValidate="txtPassword" ErrorMessage='<img src="../Images/no.png">' runat="server" />

            <br />
            <asp:button id="btnSubmit" text="Submit" runat="server" />
        </form>

        <p>Hint: Try submitting it before you enter something.</p>
    </body>

这是一个简单的布局，仅用于学习目的，但它们严重对齐。他们只是在一起闷闷不乐。

有人建议我只需要使用'space'键来创建它们之间的空格，但这根本不会对齐它们。它们永远无法正确对齐。

有人说使用表格，但我不喜欢使用表格进行布局。

我怎样才能实现简单这两者之间的组织风格字段？

Answer 1

扩展Creasey的答案。

<div style="width=150">Usuario:</div>
<asp:TextBox id="txtUserName" runat="server" />

...

<div style="width=150">Contrasena:</div>
<asp:TextBox id="txtPassword" runat="server" />

Answer 2

将标签包装在带有类的div中。然后设置标签类的最小宽度，使其尽可能宽，然后所有字段/标签将排成一行。

Answer 3

如何填充它们以便它们不会一起被吹拂？当然，你可能想要创建一个css类而不是style属性，但是你明白了。

就ASP.NET的标准而言，只需使用标准的CSS。与任何其他Web编程语言相比，ASP.NET没有任何根本的不同。

<form id="frmValidator" method="post" runat="server">
            <div style="padding:5px;">
                Usuario:
                <asp:TextBox id="txtUserName" runat="server" />
                <asp:RequiredFieldValidator id="userNameValidator" ControlToValidate="txtUserName" ErrorMessage='<img src="../Images/no.png">' runat="server" />

            </div>
            <div style="padding:5px;">
                Contrasena:
                <asp:TextBox id="txtPassword" runat="server" />
                <asp:RequiredFieldValidator id="passwordValidator" ControlToValidate="txtPassword" ErrorMessage='<img src="../Images/no.png">' runat="server" />

            </div>
            <div style="padding:5px;">
                <asp:button id="btnSubmit" text="Submit" runat="server" />
            </div>
        </form>

Answer 4

我会尝试使用模板或表单生成器。解决方案的一个很好的起点是：

http://www.smashingmagazine.com/2006/11/11/css-based-forms-modern-solutions/

： - ）

Answer 5

不需要额外的<div> - 这就是CSS的用途！

以下是使用ASP呈现为HTML的基本示例：http://jsfiddle.net/qWcpN/

如果您不想查看链接，请输入以下代码。

HTML：

<asp:Label runat="server" AssociatedControlID="txtUserName" Text="Username" />
<asp:TextBox runat="server" id="txtUserName" />
<asp:RequiredFieldValidator runat="server" id="userNameValidator" CssClass="formError" ControlToValidate="txtUserName" ErrorMessage='Username is required!' />

<asp:Label runat="server" AssociatedControlID="txtPassword" Text="Password" />
<asp:TextBox runat="server" id="txtPassword" />
<asp:RequiredFieldValidator runat="server" id="passwordValidator" CssClass="formError" ControlToValidate="txtPassword" ErrorMessage='Password is required!'  />

<asp:Button runat="server" id="btnSubmit" text="Submit" />

CSS：

label{
    display:block;
    font-weight:bold;
    margin-bottom:2px;
}
input[type='text'],
input[type='password']{
    display:block;
    margin-bottom:10px;
    padding:3px;
}

button,
input[type='button'],
input[type='submit']{
    padding:5px;
}

.formError{
    background:#F00;
    color:#FFF;
    display:block;
    font-weight:bold;
    margin-bottom:10px;
    max-width:300px;
    padding:3px;
}

ASP.Net中是否有标准的表单布局方式？

5 个答案: