我看到大量包含表单域的表单设计,但我找不到在表单中显示标签的好例子。
有没有人对显示信息而不是收集信息的表单有很好的布局?我有一个显示包含多个字段的用户配置文件的表单,我想将它分布在水平区域中。
您可以通过制作标签和数据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>
听起来你不是在谈论表格。显示用户数据可以模仿表单的布局,但如果您没有字段,它就不是表单。
您是指 HTML 标签,还是标签的 .Net/Java UI 概念?在 HTML 中,标签与输入字段匹配作为提示(“名字:”等)。听起来您更像是在谈论 .Net 标签,它只是一个文本占位符。
我相信这完全取决于数据的性质:
不幸的是,我相信您的问题没有灵丹妙药……对于您的特定问题,这只是常识问题。