6

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

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

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

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

这个话题很有帮助： 在 html 中显示表单时使用表格标签是不是糟糕的设计？ 但它并没有解决我的一些担忧。

您会提出什么解决方案？我可以在表中动态删除/插入值或尝试执行 DIV。

4

3 回答 3

4

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

你可以在这里看到结果。

于 2010-08-24T23:12:05.027 回答
1

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

对于一个液体布局的表格——并且液体布局通常是非常理想的——安排一个没有表格样式显示的表格要困难得多，因为float并且position不容易允许像“这个单元格是剩余宽度的一半”这样的计算。父，在分配固定宽度的标签之后”。

因此，在这种情况下，当然包括您发布的那种两列表单，table-*CSSdisplay值是您唯一的可能性。如果您只针对 IE8 和其他现代浏览器，您可以display: table-row在样式表中使用 div 和 set 等。然而，为了与 IE6-7 和其他旧/移动/小众浏览器兼容，您将不得不使用实际的 //<table>元素，因为只有现代浏览器支持独立于表格元素的表格 CSS。<tr><td>

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

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

于 2010-08-24T23:48:54.923 回答
0
  • General information是某种列表，确切地说是键 > 值列表 -<dl />可能是它的最佳结构
  • Issues values是一张桌子，
  • Ratings是一张桌子，
  • 两者都是列表Redemption-Indicators无序列表<ul />
于 2010-08-24T23:56:42.830 回答