在将桌面应用程序转换为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
Box ID="tbDepartment" runat="server" MaxLength="255" />
requiredFieldValidator ID="valDepartment" TabIndex="-1" runat="server" ControlTovalidate="tbDepartment"> * requiredFieldValidator>
Box ID="tbFund" runat="server" MaxLength="255" />
requiredFieldValidator ID="valFund" TabIndex="-1" runat="server" ControlTovalidate="tbFund"> * requiredFieldValidator>
Box ID="tbProgram" runat="server" MaxLength="255" />
requiredFieldValidator ID="valProgram" TabIndex="-1" runat="server" ControlTovalidate="tbProgram"> * requiredFieldValidator>
Box ID="tbProject" runat="server" MaxLength="255" />
requiredFieldValidator ID="valProject" TabIndex="-1" runat="server" ControlTovalidate="tbProject"> * requiredFieldValidator>
Box ID="tbSpeedKey" runat="server" MaxLength="255" />
requiredFieldValidator ID="valSpeedKey" TabIndex="-1" runat="server" ControlTovalidate="tbSpeedKey"> * requiredFieldValidator>
Box ID="tbAward" runat="server" MaxLength="255" />
requiredFieldValidator ID="valAward" TabIndex="-1" runat="server" ControlTovalidate="tbAward"> * requiredFieldValidator>
Box ID="taProjectDesc" runat="server" TextMode="MultiLine" />
requiredFieldValidator ID="valProjectDesc" TabIndex="-1" runat="server" ControlTovalidate="taProjectDesc"> * requiredFieldValidator>
原文地址:https://www.jb51.cc/css/427392.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。