当前位置：文江博客话题详情

复杂表格table vs div

发布于 2024-09-16 07:40:46 字数 587 浏览 8 评论 0原文

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

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

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

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

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

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

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

小耗子 2024-09-23 07:40:46

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

您可以查看结果在这里。

I would go the div route. As long as you're careful of your widths when you apply floats, it's actually pretty straightforward to get the layouts to work properly in different screen resolutions.

Here are a few rules:

Set a max width on your form or your form's wrapper element. If you want to float elements on one row make sure their width's added together does not exceed this width.
If you are adding horizontal padding/margins to your floated elements remember that these add to the total width of the element.
Avoid mixing percentage widths with pixel padding and margins. Apply the percentage width to a parent element and the pixel padding/margins to a child element.
Use clearing elements between your rows of elements to keep everything in line.

As to the markup, you can use the form elements along with CSS to create a semantic structure:

<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>

And the 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;  
}

You can see the result here.

回复收藏 0 原文

迷爱 2024-09-23 07:40:46

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

对于液体布局表格（液体布局通常是非常理想的），在没有表格样式显示的情况下排列表单要困难得多，因为 float 和 position不容易进行诸如“分配固定宽度标签后，该单元格是父单元格剩余宽度的一半”之类的计算。

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

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

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