在将桌面应用程序转换为Web应用程序时,我在尝试使用CSS实现多列数据输入表单时遇到了无知.我决定避免在这类事情中使用表格,虽然我找到了一个很好的
reference来布置数据输入表单,但我发现没有什么适用于像这样的多列布局:
谁能指出我正确的方向?
解决方法
>
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"> *</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"> *</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"> *</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"> *</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"> *</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"> *</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"> *</asp:requiredFieldValidator> <p> </div>