如何布局看起来像纸质表单的aspx页面?
我一直在开发桌面 aps,所以我的 aspx/html 有点生疏了。我需要做的是布局一个 aspx 页面,其字段看起来像这样(有很多字段,这只是一个抽象): 基本上,这些项目看起来像是在行中,但不是在独特的列中(例如,在我的示例中,街道名称不必与街道号码等对齐...)
我想实现与浏览器的最大兼容性 - 会是什么最适合这种情况使用?表格、列表项...div?还有别的东西吗?
我正在使用 aspx C# 4.0。
I've been developing desktop aps, so my aspx/html got a bit rusty. What I need to do is layout an aspx page with fields that look something like this (there are many fields, this is just an abstraction):
Basically, the items look like they are in rows, but not in distinctive columns (e.g. in my example, street name doesn't have to allign with street number etc...)
I want to achieve maximum compatibility with browsers - what would be best to use for this scenario? Tables, list items... divs? something else?
I'm using aspx C# 4.0.
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
这是一个非表格示例:
http://jsfiddle.net/eRY8T/7/
传统观点是
table
应该用于以表格格式显示数据,而不是用于布局表单。在实践中,我认为有时使用表格作为表单更容易 - 但这通常是当您的表单看起来像表格数据时(例如,一列用于标签,另一列用于输入)。
在你的情况下,我认为使用 div 实际上比表更容易。这可能需要大量的 rowspan/colspan/嵌套表才能正确。
与表格相比,使用基于 CSS 的布局的另一个优点是 Tab 键顺序可能更有意义。在示例中,请注意 tab 如何依次遍历第一列和第二列。在表中,它会在移动到下一行之前遍历给定行上的每个输入。
Here's a non-table example:
http://jsfiddle.net/eRY8T/7/
The conventional wisdom is that
table
should be used for displaying data in tabular format, not for laying out forms.In practice I think it is sometimes easier to use tables for forms - but this is typically when your form looks like tabular data (e.g. one column for labels, another for inputs).
In your situation, I think using divs is actually easier than tables would be. This would probably require lots of rowspan/colspan/nested tables to get right.
The other advantage of using a CSS based layout over tables is that the tab order will probably make more sense. In the example, notice how tab goes through the first column then the 2nd one. In a table it would go through every input on a given row before moving to the next row.
4行7列的表格怎么样
并使用相应的
colspan
来更好地对齐。How about Table with 4 Rows and 7 Columns
and use corresponding
colspan
for better alignment.