javascript - 表单的 CSS 网格系统(多列)

Question

为了将来引用这里是像素完美精度的最终结果:

CSS代码:

._25 {
    width: 21%;
    display: inline;
    float: left;
    margin-left: 2%;
    margin-right: 2%;
}
._50 {
    width: 46%;
    display: inline;
    float: left;
    margin-left: 2%;
    margin-right: 2%;
}
._75 {
    width: 71%;
    display: inline;
    float: left;
    margin-left: 2%;
    margin-right: 2%;
}
._100 {
    width: 96%;
    display: inline;
    float: left;
    margin-left: 2%;
    margin-right: 2%;
}
label {
    width: 100%;
}
input {
    border: 1px solid #B3B3B3;
    width: 100%;
    -moz-border-radius: 3px;
}
textarea {
    border: 1px solid #B3B3B3;
    width: 100%;
    -moz-border-radius: 3px;
}
select {
    border: 1px solid #B3B3B3;
    width: 100%;
    -moz-border-radius: 3px;
}

和一些示例 HTML 代码:

<div class="_50">
    <p><label for="in_user">Username</label><input id="in_user" type="text" value=""/></p>
</div>

<div class="_50">
    <p><label for="in_pass">Password</label><input id="in_pass" type="text" value=""/></p>
</div>

---

最近我开始使用 CSS 网格系统，我发现设计网页的整个过程变得更加简单。现在我正在尝试对表单元素进行样式化，但是我很难用列制作表单，请看下面的例子:

• div(宽度 = 400 像素)
  • 表格
    • ul
      • li.half
        • 标签
        • 输入(宽度应为 200 像素)
      • li.half
        • 另一个标签
        • 另一个输入(也应该是 200px 宽)

基本上，我正在应用一个宽度属性为 50% 的类，但将两个输入并排放置会使行大于 100% (400px) - 我猜这是因为 边框、边距和填充。

有没有我可以使用任何 CSS 网格系统来拥有多列表单，同时仍然使所有表单元素具有相同的大小(输入、选择和文本区域)；例如。 1 列中的 1 个输入应为 400 像素，而 2 列中的每列应为 200 像素。

编辑:Wufoo has some examples我想做什么，但我对 CSS 太无知，无法理解所有代码，如果有人能给我一些指示，我将不胜感激。

Answer 1

首先，不要使用表格。将表单元素放在表格中并不能解决您的问题，并且会使您的维护复杂化。使用表格来补充表格表示是无能和复杂的标志。它也完全是非语义的。相反，您实际上可能必须编写一些 CSS。老实说，如果您要为非表格数据使用表格，那么甚至不必费心使用 CSS，因为这会成倍增加维护的复杂性。

注意以下几点:

1) 用“em”单位定义所有单位。大多数表单元素旨在包含文本。这些元素，如文本字段和文本区域 block ，可以作为可访问性的特征来增加和减少。这意味着您的像素完美漂亮的 CSS 网格将在用户更改页面上的文本大小时中断。

2) 不要将表单元素包裹在 div 中。与 div 一样，您的表单是 block 级元素。除非表单在 div 父级下有对等节点，否则只需将任何表示直接定向到表单元素，而不是仅存在以包含表单的父元素。

3) 对表单元素进行分组。如果你是 float 文本字段，如果表单独立于它们各自的标签元素 float ，事情就会变得一团糟。将有序列表放入表单中，然后将每个表单元素包装在列表项中会更容易。这样，您只需考虑定义标签元素相对于其表单控件的布局，然后通过定义列表项的呈现将它们一起布局。此方法也是语义化的，它会通知文本读者您的表单控件的顺序。

4) 不要使用 !important 声明。这可以快速修复您的 CSS，但完全搞砸了继承并且绝对使维护复杂化。而是花额外的时间在第一次就正确地编写代码，以便将来的维护是一个快速而小的事件。

5) 不要使用绝对位置，除非你真的知道你在做什么，即使你的表单设置为相对位置。在许多情况下，绝对位置会导致意外行为和意外问题。

6) 为确保您的 CSS 代码真正定义了真正的网格，请使用 Firefox MeasureIt 插件。它将帮助您实现惊人的准确性，并在制作网格时为您节省难以置信的时间。

7) 第一次使用尽可能少的代码正确完成所有工作，以完成工作并完美呈现您的表单。只有这样才能测试您的表单的跨浏览器准确性。一次修正一项跨浏览器准确性，以限制不必要的 CSS 代码膨胀。