asp.net - 如何在 Asp.Net 中使用 CSS 创建多列数据输入表单？

Question

在将桌面应用程序转换为 Web 应用程序时，我在尝试使用 CSS 实现多列数据输入表单时遇到了无知。我决心避免为这类事情使用表格，虽然我找到了一个很好的 reference布局数据输入表单，我找不到任何适用于像这样的多列布局的内容:

谁能指出我正确的方向？

Answer 1

• Example on jsFiddle

这是一个屏幕截图，请注意我是如何用数字演示 Tab 键顺序的:

请注意，RedFilter 的 答案有不同的 Tab 键顺序，我在下面的屏幕截图中展示了这一点:

(下面的代码使用 ASP.NET 验证器完成)

CSS (跨浏览器友好)

p
{
 margin:1em 0;
}
label
{
 float:left;
 width:5em;
 text-align:right;
 margin-right:0.5em;
}
input[type="text"]
{
 width: 10em;
}
.left-column, right-column
{
 float:left;
}
.left-column
{
 margin-right:1em;
}​
.textarea-label
{
 float:none;
}
textarea
{
 height:5em;
 width:35em;
}​

HTML

<div class="left-column">
  <p>
    <label for="tbDepartment">Department:</label>
    <asp:TextBox ID="tbDepartment" runat="server" MaxLength="255" />
    <asp:RequiredFieldValidator ID="valDepartment" TabIndex="-1" runat="server" ControlToValidate="tbDepartment">&nbsp;*</asp:RequiredFieldValidator>
  </p>
  <p>
    <label for="tbFund">Fund:</label>
    <asp:TextBox ID="tbFund" runat="server" MaxLength="255" />
    <asp:RequiredFieldValidator ID="valFund" TabIndex="-1" runat="server" ControlToValidate="tbFund">&nbsp;*</asp:RequiredFieldValidator>
  </p>
  <p>
  <label for="tbProgram">Program:</label>
    <asp:TextBox ID="tbProgram" runat="server" MaxLength="255" />
    <asp:RequiredFieldValidator ID="valProgram" TabIndex="-1" runat="server" ControlToValidate="tbProgram">&nbsp;*</asp:RequiredFieldValidator>
  </p>
</div>
<div class="right-column">
  <p>
    <label for="tbProject">Project:</label>
    <asp:TextBox ID="tbProject" runat="server" MaxLength="255" />
    <asp:RequiredFieldValidator ID="valProject" TabIndex="-1" runat="server" ControlToValidate="tbProject">&nbsp;*</asp:RequiredFieldValidator>
  </p>
  <p>
    <label for="tbSpeedKey">Speed Key:</label>
    <asp:TextBox ID="tbSpeedKey" runat="server" MaxLength="255" />
    <asp:RequiredFieldValidator ID="valSpeedKey" TabIndex="-1" runat="server" ControlToValidate="tbSpeedKey">&nbsp;*</asp:RequiredFieldValidator>
  </p>
  <p>
    <label for="tbAward">Award:</label>
    <asp:TextBox ID="tbAward" runat="server" MaxLength="255" />
    <asp:RequiredFieldValidator ID="valAward" TabIndex="-1" runat="server" ControlToValidate="tbAward">&nbsp;*</asp:RequiredFieldValidator>
  </p>
</div>​
<div>
  <p>
    <label class="textarea-label" for="taProjectDesc">Project Description:</label>
  </p>
  <p>
    <asp:TextBox ID="taProjectDesc" runat="server" TextMode="MultiLine" />
    <asp:RequiredFieldValidator ID="valProjectDesc" TabIndex="-1" runat="server" ControlToValidate="taProjectDesc">&nbsp;*</asp:RequiredFieldValidator>
  <p>
</div>