当前位置：文江博客话题详情

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

发布于 2024-09-24 02:03:09 字数 321 浏览 1 评论 0原文

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

在此处输入图像描述

有人能指出我正确的方向吗？

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

平定天下 2024-10-01 02:03:09

jsFiddle 上的示例

这是一个屏幕截图，请注意我如何演示该选项卡带数字的顺序：

alt text

请注意，RedFilter 的 答案有不同的 Tab 键顺序，我已在下面的屏幕截图中进行了演示：

alt text

（下面的代码包含 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>

Example on jsFiddle

Here's a screen shot, please notice how I demonstrated the tab order with numbers:

alt text

Please note that RedFilter's answer has a different tab order, which I have demonstrated in the screenshot below:

alt text

(code below complete with ASP.NET validators)

CSS (cross browser friendly)

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>

回复收藏 0 原文

手心的海 2024-10-01 02:03:09

有很多方法可以做到这一点 - 我在下面为您提供了一个非常精简的解决方案。您需要进行许多调整才能使此跨浏览器兼容、改善间距等，但这应该让您了解如何布置元素的基本想法：

<html>
    <head>
        <style>
            body {
                font-family:arial;
                font-size: 0.8em;
            }
            div.form p {
                clear: both;
            }
            div.form label {
                float: left;
                width: 10em;
            }
            div.form input[type="text"] {
                float: left;
                width: 16em;
                font-family:arial;
                font-size: 1.0em;
            }
            div.form textarea {
                width: 52em;
                font-family:arial;
                font-size: 1.0em;
            }
        </style>
    </head>
    <body>
        <div class="form">
            <p>
                <label>Department:</label>
                <input type=text>
                <label>Project:</label>
                <input type=text id=Project name=Project>
            </p>
            <p>
                <label>Fund:</label>
                <input type=text id=FundID name=FundID>
                <label>SpeedKey:</label>
                <input type=text id=SpeedKey name=SpeedKey>
            </p>
            <p>
                <label>Program:</label>
                <input type=text id=Program name=Program>
                <label>Award:</label>
                <input type=text id=Award name=Award>
            </p>
            <p>
                <label>Project Description:</label>
            </p>
            <p>
                <textarea id=ProjectDescription name=ProjectDescription></textarea>
            </p>
        </div>
    </body>
</html>

There are many ways to do this - I have given you a very stripped-down solution below. There are a number of tweaks you need to do to make this cross-browser compliant, improve spacing, etc., but this should give you the basic idea as to how you can lay the elements out:

<html>
    <head>
        <style>
            body {
                font-family:arial;
                font-size: 0.8em;
            }
            div.form p {
                clear: both;
            }
            div.form label {
                float: left;
                width: 10em;
            }
            div.form input[type="text"] {
                float: left;
                width: 16em;
                font-family:arial;
                font-size: 1.0em;
            }
            div.form textarea {
                width: 52em;
                font-family:arial;
                font-size: 1.0em;
            }
        </style>
    </head>
    <body>
        <div class="form">
            <p>
                <label>Department:</label>
                <input type=text>
                <label>Project:</label>
                <input type=text id=Project name=Project>
            </p>
            <p>
                <label>Fund:</label>
                <input type=text id=FundID name=FundID>
                <label>SpeedKey:</label>
                <input type=text id=SpeedKey name=SpeedKey>
            </p>
            <p>
                <label>Program:</label>
                <input type=text id=Program name=Program>
                <label>Award:</label>
                <input type=text id=Award name=Award>
            </p>
            <p>
                <label>Project Description:</label>
            </p>
            <p>
                <textarea id=ProjectDescription name=ProjectDescription></textarea>
            </p>
        </div>
    </body>
</html>

回复收藏 0 原文

栀子花开つ 2024-10-01 02:03:09

与之前的答案大致相同，我为您提供：

CSS：

fieldset {
    clear: both;
    padding: 0.4em;
    border: 1px solid #000;
    width: 80%;
    min-width: 600px;
    margin: 1em auto;
    overflow: hidden;

}

ul {
    width: 48%;
    border: 1px solid #ccc;
    margin: 0.5em;
    }

ul:nth-child(odd) {
    float: right;
    }

label {
    display: inline-block;
    width: 30%;
    text-align: right;
}

html：

<fieldset>
<ul>
    <li><label for="fieldOne">Field One:</label> <input type="text" id="fieldOne" name="fieldOne" /></li>
    <li><label for="fieldTwo">Field Two:</label> <input type="text" id="fieldTwo" name="fieldTwo" /></li>
</ul>

<ul>
    <li><label for="fieldThree">Field Three:</label> <input type="text" id="fieldThree" name="fieldThree" /></li>
    <li><label for="fieldFour">Field Four:</label> <input type="text" id="fieldFour" name="fieldFour" /></li>
</ul>
</fieldset>

<fieldset>
    <input type="submit" value="Submit" />
</fieldset>

</form>

演示地址：http://www.davidrhysthomas.co.uk/so/formCols.html

此解决方案确实使用了 CSS3（nth- child(odd))，这限制了它的跨浏览器友好性（尽管可以在 Ubuntu 10.04 上的 Opera、Chrome、Safari 和 Firefox 中使用），因此为了 IE 友好性，您必须显式添加类名您想要浮动：右侧的列。

Much the same as the previous answers, I offer you:

CSS:

fieldset {
    clear: both;
    padding: 0.4em;
    border: 1px solid #000;
    width: 80%;
    min-width: 600px;
    margin: 1em auto;
    overflow: hidden;

}

ul {
    width: 48%;
    border: 1px solid #ccc;
    margin: 0.5em;
    }

ul:nth-child(odd) {
    float: right;
    }

label {
    display: inline-block;
    width: 30%;
    text-align: right;
}

html:

<fieldset>
<ul>
    <li><label for="fieldOne">Field One:</label> <input type="text" id="fieldOne" name="fieldOne" /></li>
    <li><label for="fieldTwo">Field Two:</label> <input type="text" id="fieldTwo" name="fieldTwo" /></li>
</ul>

<ul>
    <li><label for="fieldThree">Field Three:</label> <input type="text" id="fieldThree" name="fieldThree" /></li>
    <li><label for="fieldFour">Field Four:</label> <input type="text" id="fieldFour" name="fieldFour" /></li>
</ul>
</fieldset>

<fieldset>
    <input type="submit" value="Submit" />
</fieldset>

</form>

Demo at: http://www.davidrhysthomas.co.uk/so/formCols.html

This solution does use CSS3 (the nth-child(odd)), which limits its cross-browser friendliness (though works in Opera, Chrome, Safari and Firefox on Ubuntu 10.04), so for IE-friendliness you'd have to explicitly add a class name to whichever column(s) you wanted to float: right.

回复收藏 0 原文

~没有更多了~