Question

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

<!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中正确显示表格布局的最简洁方法是什么？

编辑：

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

layout

Answer 1

绝对定位怎么样？

HTML：

<form>
    <h3> LOGIN </h3>
    <p> <label> Username: <input type="text"> </label> </p>
    <p> <label> Password: <input type="text"> </label> </p>
</form>

CSS：

p { position:relative; }
input { position:absolute; top:0; right:0; }

现场演示： http://jsfiddle.net/GCWWv/1/

或者这个CSS：

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

现场演示： http://jsfiddle.net/GCWWv/9/

Answer 2

使用<table>。最有可能的是，您已经听说在HTML中使用表格是不好的做法。确实，您应该避免使用表进行布局。但是，如果您实际显示表格数据，那么应该使用表格。如果要显示数据的行和列，这对我来说就像一张桌子。尝试用css欺骗它是不合适的。

有点原因。 HTML标记应描述其内容，而不是其外观。例如，<p>代表一个段落，而不是具有顶部和底部边距的块元素，而不是在需要更多空白时使用的内容。有些人喜欢这样，因为感觉正确。它干净整洁，提供了内容和风格之间的完美分离。做得好，它可以更容易重新打造一个网站。

但更重要的是，它对可访问性产生了巨大的影响。考虑盲人的屏幕阅读器。当屏幕阅读器遇到<table>时，它希望它包含数据。它允许用户按列，行和标题导航表。在错误的时间使用表格可能会非常混乱。正确使用它可以使用户更容易。使用div创建表格并使用花哨的CSS技巧会强制用户单独导航每个元素，而不是跳到相关的行和列。要使用您的示例，如果用户填写表单，并且某些字段不必要，他可以轻松导航<th>以找到他需要填写的字段。

还有其他类似的原因可以遵循“标签描述内容”惯例。大多数情况下，当标准浏览器以外的任何内容消耗您的页面时。想想搜索引擎，提要等等 many lengthy discussions about this online。 HTML5通过introduction of some new semantic tags进一步理解了这一概念。

Answer 3

我会做一些你不使用display：table

的东西

我会：

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

如果您需要帮助，请勾勒出您想要实现的视觉布局？祝你好运。

IE7中没有表格的表格布局

3 个答案: