用于表单的CSS网格系统(多列)

Question

为了将来参考,这里是像素完美精度的最终结果:

流体CSS形式http://i45.tinypic.com/2mn16xt.jpg

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(宽度= 400px)
  • 形成
    • UL
      • 李.半
        • 标签
        • 输入(宽度应为200px)
      • 李.半
        • 另一个标签
        • 另一个输入(也应该是200px宽)

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

我正在努力实现的模型http://i48.tinypic.com/2wmgy0n.png

是否有任何CSS网格系统可用于拥有多列表单,同时仍然使所有表单元素具有相同的大小(输入,选择和textareas); 例如.1列中的1个输入应该具有400px,而2列应该具有200px.

编辑:Wufoo 有 一些 我正在尝试做的例子,但我对CSS太无知了解所有代码,如果有人能给我一些指示,我将不胜感激.

Answer 1

首先,不要使用表格.将表单元素放在表中并不能解决您的问题并使您的维护变得复杂.使用表格来补充表单呈现是无能和复杂的标志.它也完全是非语义的.相反,你可能实际上必须编写一些CSS.老实说,如果你打算将表用于非表格数据,那么甚至不要使用CSS,因为这会增加维护的复杂性.

以下是一些需要注意的事项:

1)以"em"为单位定义所有单位.大多数表单元素旨在包含文本.这些元素(如文本字段和textarea块)可以作为可访问性的特征增加和减少.这意味着您的像素完美漂亮的CSS网格将打破用户更改页面上文本大小的时刻.

2)不要将表单元素包装在div中.像div一样,你的表单是块级元素.除非表单在div父级下具有对等节点,否则只需将任何表示直接指向表单元素,而不是仅存在于包含表单的父元素.

3)对表单元素进行分组.如果您是浮动文本字段,如果表单独立于其各自的标签元素浮动,则事情可能会变得混乱.将一个有序列表放在表单中,然后将每个表单元素包装在一个列表项中会更容易.这样,您只需要担心定义标签元素相对于其表单控件的布局,然后通过定义列表项的显示将它们一起布局.此方法也是语义的,并在表单控件上向文本读者通知订单.

4)不要使用!important声明.这样可以快速修复CSS,但会完全破坏继承并使维护变得非常复杂.而是花费额外的时间在第一次正确编写代码,以便将来的维护是一个快速和轻微的事件.

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

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

7)第一次使用尽可能少的代码完成所有工作,以完成工作并完美呈现您的表单.然后才测试您的表单以确保跨浏览器的准确性 一次对浏览器的准确性进行一次修正,以限制CSS代码不必要的膨胀.

Answer 2

这样的事可能会有所帮助.这就是我在表单上的表现.虽然需要一些微调才能使其在您想要的宽度上工作.这可能会帮助您入门.

CSS:

.contact ul {margin:0; padding:0; list-style:none;}
.contact li {margin-bottom:10px; overflow:hidden;}
.contact label {display:block; margin-bottom:2px;}
.contact label span {color:#999;}
.contact .input {width:592px; border:1px solid #E0E0E0; background:#F6F6F6;}
.contact select.input {border:1px solid #E0E0E0; background:#F6F6F6;}
.contact .third {float:left; width:193px; margin-right:10px;}
.contact .third .input {width:185px;}
.contact .half {float:left; width:294px; margin-right:10px;}
.contact .half .input {width:286px;}
.contact .half select.input {width:294px;}
.contact .omega {margin-right:0;}

HTML:

<form action="/contact-us" method="post" class="contact">
    <ul>
        <li>
            <div class="half">
                <label for="name">Name:</label>
                <input type="text" id="name" name="name" class="input" />
            </div>
        </li>
        <li>
            <label for="address">Address:</label>
            <input type="text" id="address" name="address" class="input" />
        </li>
        <li>
            <div class="third">
                <label for="city">City:</label>
                <input type="text" id="city" name="city" class="input" />
            </div>
            <div class="third">
                <label for="state">State:</label>
                <input type="text" id="state" name="state" class="input" />
            </div>
            <div class="third omega">
                <label for="zip">Zip:</label>
                <input type="text" id="zip" name="zip" class="input" />
            </div>
        </li>
    </ul>
</form>

Answer 3

我想这就是您正在寻找的：

http://www.alistapart.com/articles/prettyaccessibleforms/

它应该有助于稍微简化您的结构。它没有明确描述如何制作多列表单，但如果您有一些创造力，该技术可能会扩展到这一点。