0

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

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

4

3 回答 3

2

您可以通过制作标签和数据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>
于 2009-03-17T17:00:11.530 回答
0

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

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

于 2009-03-17T16:22:52.150 回答
0

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

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

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

于 2009-03-17T16:29:45.613 回答