Html IE7中没有表格的表格布局_Html_Css_Layout_Internet Explorer 7

Html IE7中没有表格的表格布局

html css layout

Html IE7中没有表格的表格布局,html,css,layout,internet-explorer-7,Html,Css,Layout,Internet Explorer 7,我想做一个简单的表单布局，标签和输入，没有表格。它的工作原理如下： <!DOCTYPE html> <html> <head> <style type="text/css"> form { display: table; } form>div { display: table-row; } form>

我想做一个简单的表单布局，标签和输入，没有表格。它的工作原理如下：

<!DOCTYPE html>
<html>
<head>
    <style type="text/css">
        form {
            display: table;
        }

        form>div {
            display: table-row;
        }

        form>div>* {
            display: table-cell;
        }
    </style>
</head>
<body>
    <form>
        <div>
            <label>Hello</label>
            <input type="text"/>
        </div>
        <div>
            <label>World</label>
            <input type="text"/>
        </div>
    </form>
</body>
</html>


形式{
显示：表格；
}
表格>分区{
显示：表格行；
}
表格>分区>*{
显示：表格单元格；
}
你好
世界

但是，它在IE7中不起作用。要使表格布局在IE7、IE8、Firefox、Chrome和Safari中正确显示，最干净的方法是什么

编辑：

我添加了一个我想要实现的布局模型：

我会做一些不使用display:table的事情

我想：

form div {
float: left;
width: 200px /* change this to whatever */
}

如果您需要帮助，请概述一下您试图实现的视觉布局？祝你好运。

我会做一些你不使用display:table的事情

我想：

form div {
float: left;
width: 200px /* change this to whatever */
}

如果您需要帮助，请概述一下您试图实现的视觉布局？祝你好运。

绝对定位怎么样

HTML:

现场演示：

或者这个CSS：

p { position:relative; }
input { position:absolute; left:100px; }

现场演示：

绝对定位怎么样

HTML:

现场演示：

或者这个CSS：

p { position:relative; }
input { position:absolute; left:100px; }

现场演示：

使用

。很可能，您已经听说在HTML中使用表是一种不好的做法。确实，您应该避免使用表进行布局但是，如果实际显示的是表格数据，则应使用表格。如果您正在显示数据的行和列，我觉得这就像一个表。尝试用css欺骗它是不合适的

有点关于为什么。HTML标记应该描述其内容，而不是外观。例如，

表示段落，而不是具有上下页边距的块元素，也不是需要更多空白时使用的内容。有些人喜欢这样是因为感觉不错。它干净整洁，在内容和风格之间提供了一个很好的分离。做得好，它可以使网站更容易重新皮肤

但更重要的是，它对可访问性产生了巨大的影响。考虑盲人的屏幕阅读器。当屏幕阅读器遇到

时，它希望它包含数据。它允许用户按列、行和标题浏览表。在错误的时间使用表格会让人非常困惑。正确地使用它，可以让用户更加容易。使用div和花哨的CSS技巧创建一个表会迫使用户单独导航每个元素，而不是跳到相关的行和列。以您的示例为例，如果用户正在填写表单，并且某些字段是不必要的，那么他可以通过

轻松导航以找到需要填写的字段

遵循“标记描述内容”约定还有其他类似的原因。大多数情况下，当标准浏览器以外的任何东西正在使用您的页面时。想想搜索引擎、订阅源等等吧 . HTML5进一步利用了这个概念。

使用

有点关于为什么。HTML标记应该描述其内容，而不是外观。例如，

但更重要的是，它对可访问性产生了巨大的影响。考虑盲人的屏幕阅读器。当屏幕阅读器遇到

轻松导航以找到需要填写的字段

遵循“标记描述内容”约定还有其他类似的原因。大多数情况下，当标准浏览器以外的任何东西正在使用您的页面时。想想搜索引擎、订阅源等等吧 .

HTML5进一步利用了这个概念。

显示：表-*

和子选择器

在ie7中不起作用在ie7中不起作用。不管怎么说，这不是做这件事的方法-你不需要在这里显示：表格。@thirtydot:你想告诉我怎么做吗？我真的不知道你想要什么。“简单的表单布局”可能意味着许多不同的事情。帮助人们理解的一个可靠方法是创建一张简单的图片。@thirtydot:好的，我在我的原始问题中添加了一个模型。

display:table-*

和子选择器

在ie7中不起作用在ie7中不起作用。不管怎么说，这不是做这件事的方法-你不需要在这里显示：表格。@thirtydot:你想告诉我怎么做吗？我真的不知道你想要什么。“简单的表单布局”可能意味着许多不同的事情。帮助人们理解的一个非常有效的方法是创建一张简单的图片。@thirtydot:好的，我在我原来的问题中添加了一个模型。几乎是一张有两个立柱的桌子