复杂的表格与div

Question

我在网上查看了使用DIV实现表单的示例,我看到的只是一个非常简单的列表单.我有一些相当复杂的表格,这是一张图片:

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

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

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

这个主题很有用: 在html中显示表单时使用表标签是不是很糟糕？ 但它没有解决我的一些担忧.

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

Answer 1

我会走div路线。只要您在应用浮动时注意宽度，让布局在不同的屏幕分辨率下正常工作实际上非常简单。

以下是一些规则：

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

至于标记，您可以使用表单元素和 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;  
}

您可以在此处查看结果。