Question

我在网上查看了使用DIV实现表单的示例，我看到的只是一个非常简单的列形式。我有一些非常复杂的形式，这是一张图片：

http://img835.imageshack.us/img835/8292/formn.jpg

很容易让它与表（我这样做）一起工作，我唯一的问题是有时我不需要显示一些选项并将值向上移动一行以避免间隙。

我开始使用div创建一些表单，但是当我更改浏览器窗口大小并且不容易对齐时，它们会分崩离析。

这个主题很有帮助： Is it bad design to use table tags when displaying forms in html? 但它没有解决我的一些担忧。

您建议作为解决方案？我可以动态删除/插入表中的值或尝试执行DIV。

Answer 1

我会去div路线。只要在应用浮点数时小心宽度，实际上就可以非常直接地使布局在不同的屏幕分辨率下正常工作。

以下是一些规则：

在表单或表单的包装元素上设置最大宽度。如果要在一行上浮动元素，请确保它们的宽度加在一起不超过此宽度。
如果要向浮动元素添加水平填充/边距，请记住这些添加到元素的总宽度。
避免将百分比宽度与像素填充和边距混合。将百分比宽度应用于父元素，将像素填充/边距应用于子元素。
在元素行之间使用清除元素以使所有内容保持一致。

对于标记，您可以使用表单元素和CSS来创建语义结构：

<fieldset>
    <legend>Fieldset Title</legend>

    <label for="input1">Input 1:</label>
    <span><input type="text" id="input1" name="input1"/></span>
    <label for="input2">Input 2:</label>
    <span><input type="text" id="input2" name="input2"/></span>

    <br/>

    <label for="input3">Input 3:</label>
    <span><input type="text" id="input3" name="input3"/></span>
    <label for="input4">Input 4:</label>
    <span><input type="text" id="input4" name="input4"/></span>
</fieldset>

CSS：

fieldset {
    padding: 20px 0;
    width: 600px;
    margin: 0;
    border: 0;
}

legend {
    display: block;
    width: 100%;
    background: black;
    color: white;
}

label, span{
    float: left;
    width: 150px;
}

input {
    width: 120px;  
}

br {
    clear: both;  
}

你可以see the result here。

Answer 2

如果它是一个固定宽度的表，那么使用div和float来布局是很简单的。只需将每个宽度设置为您想要的宽度。

对于液体布局表 - 液体布局通常是非常需要的 - 在没有桌子式显示的情况下安排表单要困难得多，因为float和position不容易允许用于计算，例如“在分配了固定宽度标签后，此单元格是父级剩余宽度的一半”。

所以在这样的情况下，肯定包含您发布的两列形式，table-* CSS display值是您唯一的可能性。如果您只针对IE8和其他现代浏览器，则可以使用div并在样式表中设置display: table-row等。但是，为了与IE6-7和其他旧版/移动/小众浏览器兼容，您必须使用实际的<table> / <tr> / <td>元素，因为只有现代浏览器支持table-CSS独立于表格元素。

这并不羞耻。无论如何，表单都是半表格的，并且没有实际的可访问性缺点，因为页面内容保持适当的顺序。

注意：对于液体布局表单，您还有调整输入字段大小以匹配父元素的问题。 input { width: 100%; }几乎可以做到，但并不完全，因为width不包括默认情况下输入获得的边框或填充。您可以使用CSS3 box-sizing及其浏览器特定版本来解决现代浏览器的问题，但如果您希望它与IE6-7上的像素完全对齐，则必须使用填充父元素等于子输入字段上的边框/填充。

Answer 3

General information是某种列表，键＆gt;值列表准确 - <dl />可能是最好的结构
Issues values是一张表，
Ratings是一张表，
Redemption和Indicators都是列表 - 无序列表<ul />

复杂的表格与div

3 个答案: