<分区>
<分区>
这是针对响应式网页设计的,我正在查看一些现有代码以了解如何完成表单。
同事设置容器 div
名字标签和 <input>
以及输入框下方的“错误消息”,使用 CSS display: table
和 display: table-cell
.他提到它在 Chrome 和 Firefox 上运行良好,但在 IE 8 上有些奇怪。请参阅 http://jsfiddle.net/DzEww/7/ 上的简化版本。
这样表单就可以在任何桌面浏览器和可能只有 320 像素宽的移动设备上很好地显示。
首先,我想知道,这是进行响应式网页设计的首选方法吗?
我想知道我们是否使用 CSS table
和 table-cell
,那我们为什么不直接使用 HTML <table>
, <tr>
, 和 <td>
去做吧? (例如: http://jsfiddle.net/DzEww/12/ ) 用CSS table display来显示它并期望它是一个表格的结构而不是将其标记为表格感觉有点奇怪。如果我们确实希望该结构是一个表,那我们为什么不直接使用 <table><tr><td>
呢?标记它?
(请注意,此表单实际上是一个很好的表单标签和表单字段表格,因此使用 <table><tr><td>
实际上可能很有意义。)
最佳答案
HTML
中的table 元素 是一种语义结构,用于描述数据是什么。如果数据是表格形式的(通常是可以存储在电子表格中的数据),则应使用 table 元素,它可能需要标记为 HTML 中的表格。
虽然 display
属性的 table
值 只是一个在浏览器中设置类似表格的外观的工具,但它 没有语义意义。这种技术有可能轻松创建复杂的网格布局。
使用表格元素进行布局会告诉用户代理,“此数据是表格形式的。”使用一堆将 display 属性设置为 table
和 table-cell
的 div 对用户代理没有任何意义,只是要求它以某种方式在视觉上呈现它们,如果它有能力这样做的话。
当然,当我们真正拥有的是表格数据时,我们还应该注意不要在一堆 div 元素上使用 display: table;
!
关于css - 对于 CSS,如果我们将显示设置为表格、表格行或表格单元格,那么我们为什么不直接使用 <table><tr><td> 来做呢?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23262405/