复杂窗体表与DIV

我要走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;  
}

你可以 see the result here .

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

对于液体布局表和液体布局通常都是非常理想的,因此很难安排没有表格样式显示的表单,因为 float 和 position 在分配固定宽度标签后,不要轻易允许计算,如_该单元格是父单元格剩余宽度的一半。

因此,在这种情况下,它当然包括您发布的两列形式,即 table-* CSS display 价值观是你唯一的可能。如果你只瞄准IE8和其他现代浏览器,你可以使用div和set display: table-row 样式表中的等。但是,为了与IE6-7和其他较旧/移动/利基浏览器兼容,您必须使用实际的 <table> / <tr> / <td> 元素,因为只有现代浏览器支持独立于表元素的表CSS。

这是不羞耻的。不管怎样,表单都是半表格式的,并且没有实际的可访问性缺点,因为页面内容保持了适当的顺序。

注意:对于液体布局表单,您还需要调整输入字段的大小以匹配父元素。 input { width: 100%; } 差不多,但不完全,因为 width 不包括默认情况下输入获取的边框或填充。你可以用CSS3 box-sizing 对于现代浏览器,它的特定浏览器版本可以绕过这个问题,但是如果你想让它与IE6-7上的像素完全对齐,你就必须在父元素上使用padding,相当于子输入字段上的border/padding。

• General information 是某种列表,关键字>值列表是否准确- <dl /> 可能是最好的结构
• Issues values 是一张桌子,
• Ratings 是一张桌子,
• 两个 Redemption 和 Indicators 是列表-无序列表 <ul />