用于在标签中显示内容的表单设计答案

【问题标题】：Form designs for displaying content in labels用于在标签中显示内容的表单设计
【发布时间】：2009-03-17 16:05:09
【问题描述】：

我看到了很多包含表单域的表单设计，但我找不到在表单中显示标签的好例子。

有没有人为显示信息而不是收集信息的表单提供良好的布局？我有一个显示包含多个字段的用户配置文件的表单，我想将它分布在水平区域中。

【问题讨论】：

【解决方案1】：

您可以通过将标签和数据设置为display: inline-block 并为标签提供固定宽度和右对齐来获得很好的效果：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
    <head>
        <title>Mailing label</title>

        <style type="text/css">
            .form div.row {
                margin-top: .25em;
            }

            .form span {
                display: inline-block;
                vertical-align: top;
            }

            .form span.label {
                font-weight: bold;
                margin-right: .25em;
                text-align: right;
                width: 10em;
            }
        </style>
    </head>

    <body>
        <div class="form">
            <div class="row"><span class="label">Name:</span> <span class="value">Ben Blank</span></div>
            <div class="row"><span class="label">Address:</span> <span class="value">1024 Foo Bar Drive<br/>Silicon Valley, CA, 69105</span></div>
            <div class="row"><span class="label">E-Mail:</span> <span class="value">ben.blank@example.com</span></div>
            <div class="row"><span class="label">Phone:</span> <span class="value">(202) 555-1212</span></div>
        </div>
    </body>
</html>

【讨论】：

在 css 中是否有一种简单的方法可以在页面上水平放置多个标签/字段？
只需在每个元素上设置一个明确的宽度。 Inline-block 将允许它们在同一行上同时采用宽度和“流动”。

【解决方案2】：

听起来你不是在谈论表格。显示用户数据可以模仿表单的布局，但如果您没有字段，它就不是表单。

您指的是 HTML 标签，还是 .Net/Java UI 的标签概念？在 HTML 中，标签与输入字段匹配作为提示（“名字：”等）。这听起来更像是在谈论 .Net 标签，它只是一个文本占位符。

【讨论】：

我想我正在谈论以一种令人愉悦的方式显示带有标题的数据，例如名字、姓氏、地址、电子邮件。

【解决方案3】：

我相信这完全取决于数据的性质：

如果您要显示数字，则字段会更小，您可以在一行中显示更多数据。
如果要显示长文本，那就很难了。
这还取决于哪些数据更重要并且您希望首先显示。
最后，不同的用户可能需要以不同的方式查看数据。

不幸的是，我相信没有灵丹妙药可以解决您的问题...对于您的特定问题，这只是常识问题。

【讨论】：