html - html中高效的表单布局

标签 html css

我正在将 silverlight 应用程序转换为“html5”网络应用程序。我只是想知道布局复杂企业表单的最有效/可读庄园是什么。这是一个表单示例:

enter image description here

我可以在几分钟内用 xaml 将其布置出来。它的布局如下:

enter image description here

我听说在 html 中使用表格是一种糟糕的形式。任何建议将不胜感激。

谢谢

最佳答案

我建议使用 Object-Oriented CSS 来自动解决布局问题。您会希望在不同的场景中使结构适应不同的尺寸,因此您可能希望在您的 CSS 中使用网格系统来集中设计布局。

.left { float:left; }
.right { float: right }
.global { width: 960px; }
.onefifth { width: 20%; }
.onetenth { width: 10%; }
.onetwentieth { width: 5%; }

等等……

我向您保证,这种方法会大大减少您的样式,从而提高性能。

恕我直言,不使用表格让生活更轻松。

参见:https://github.com/stubbornella/oocss/wiki/ (面向对象的 CSS) 这是 Nicole Sullivan 对 Yahoo 和 Facebook 所做的,绝对值得一看

关于html - html中高效的表单布局,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11944058/

相关文章:

javascript - jQuery 中的 .html() 不起作用

html - 在标题和页面内容之间创建一个透明的间隙

html - 为什么我的 div 不在词缀菜单中滚动?

javascript - 获取单独 html 标签中的值

javascript - 滚动到 div 的底部?

html - Flex - 使父级宽度为子级?

html - 使用 CSS 强制包装 float 的 div

javascript - 如何打印网页的一部分,包括所选内容

css - 输入向下移动 1px

javascript - 使用 append 方法删除附加的 div