用于表单的CSS网格系统（多列）
为了将来的参考，这里是像素完美精度的最终结果：
stream体的CSSformshttp://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网格系统，我发现devise网页的整个过程变得更加简单。 现在我正在尝试设置表单元素的风格，但是我很难用列创build表单，例如：
- div（width = 400px）
- 形成
- UL
- li .half
- 标签
- input（应该是200px宽）
- li .half
- 另一个标签
- 另一个input（也应该是200px宽）
- li .half
- UL
- 形成
基本上我应用一个具有50％宽度属性的类，但将两个input并排使行大于100％（400px） – 我想这是因为边框，边距和填充 。
我试图实现的样机http://i48.tinypic.com/2wmgy0n.png
是否有任何CSS网格系统，我可以使用多列forms，同时仍然使所有表单元素具有相同的大小 （input，select和textareas）; 例如。 1列1个input应该有400px，而2列应该有200px每个。
编辑：Wufoo 有 一些我想要做的例子 ，但我太过于无知在CSS来理解所有的代码，我将不胜感激，如果有人可以给我一些指针。
检查了这一点： http : //www.noupe.com/design/ultimate-guide-to-grid-based-web-design.html
有一切你需要知道，包括CSS的API和模板
编辑： 这是我最后的解决scheme与Fluid960的CSS模板
这是一个graphics化的例子 。 当然，你可以通过编辑CSS来轻松改变颜色。
首先，不要使用表格。 将表单元素放在表格中并不能解决您的问题并使您的维护复杂化。 用表格来补充表格是表示无能和复杂的performance。 这也完全是非语义的。 相反，你可能不得不写一些CSS。 老实说，如果你打算使用非表格数据，那么甚至不用打扰CSS的使用，因为这会增加维护的复杂性。
这里有一些事情要记住：
1）用“em”单位定义你所有的单位。 大多数表单元素旨在包含文本。 这些元素，如文本字段和textarea块，可以增加和减less作为一个function的可访问性。 这意味着你的像素完美的CSS网格将打破用户改变页面上的文字大小的时刻。
2）不要把你的表单元素包装在一个div中。 像div一样，你的表单是块级元素。 除非表单在父对象下有对等节点，否则直接将任何表示直接指向表单元素，而不是仅包含表单的父元素。
3）分组你的表单元素。 如果你是浮动文本字段的东西可以得到所有搞砸了，如果forms浮动独立于各自的标签元素。 在你的表单中放置一个有序列表，然后将每个表单元素包装在一个列表项中将会更容易。 这样，您只需要担心如何定义标签元素相对于其表单控件的布局，然后通过定义列表项的列表来将它们排列在一起。 这种方法也是语义的，并通知文本阅读器在你的表单控件上的一个命令。
4）不要使用！重要的声明。 这使得在你的CSS快速修复，但完全搞砸inheritance和绝对复杂的维护。 相反，需要花费额外的时间来正确地编写代码，以便将来的维护是一个快速而轻微的事件。
5）不要使用绝对位置，除非你真的知道你在做什么，即使你的表格被设置为相对位置。 将绝对结果定位在许多情况下出乎意料的行为和意外的问题
6）为确保您的CSS代码实际上定义了一个真正的网格，使用Firefox MeasureIt插件。它将帮助您实现出色的准确性，并节省您在制作网格时令人难以置信的时间。
7）第一次使用尽可能less的代码做一切正确的工作，完成工作，完美呈现你的表单。 只有然后testing您的表单跨浏览器的准确性。 一次修正跨浏览器的准确性，以限制不必要的膨胀到您的CSS代码。
像这样的东西可能会有所帮助。 这是我在表单上做的。 这将需要一些微调，使其工作在所需的宽度。 这虽然可以帮助你开始。
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>
我认为这是你正在寻找的：
http://www.alistapart.com/articles/prettyaccessibleforms/
它应该有助于简化你的结构。 它没有明确地描述如何制作多列格式，但是这个技术可能会扩展到那些带有一定创意的部分。
这是一个基本的开球例子，可能有用：
<!doctype html> <html lang="en"> <head> <style> fieldset { width: 400px; padding: 1%; } input[type=text], select, textarea { width: 98%; } .half { float: left; width: 48%; padding: 1%; } .full { clear: both; width: 98%; padding: 1%; } .right { text-align: right; } </style> </head> <body> <fieldset> <legend>Contact form</legend> <form> <div class="half"> <label for="name">Name</label> <input type="text" id="name" name="name"> </div> <div class="half"> <label for="email">Email</label> <input type="text" id="email" name="email"> </div> <div class="half"> <label for="zip">Zip / Postal code</label> <input type="text" id="zip" name="zip"> </div> <div class="half"> <label for="country">Country</label> <select id="country" name="country"><option></option></select> </div> <div class="full"> <label for="message">Message</label> <textarea id="message" name="message"></textarea> </div> <div class="half"> <input type="checkbox" id="copy" name="copy"> <label for="copy">Send me a copy</label> </div> <div class="half right"> <input type="submit" value="send"> </div> </form> </fieldset> </body> </html>
请注意，我正在使用left-floated div的半宽而不是无序的列表项。
正如你坚持使用百分比，不要指望它在所有浏览器中是完美的。 如果你想拥有像素完美，你真的需要使用像素。
下面是一个CSS表单框架，可以完成你所问的内容：
https://web.archive.org/web/20120503010054/http://formee.org/demo/index.htm
这里不需要stream体960系统，除非你想让表单与浏览器展开和合同。
我会为此推荐常规的旧960网格系统 。 960的宽度对于网格来说是非常好的，因为它将12和16均匀地分开，从而可以设置像素完美的三，四列布局。
熟悉960网格系统的最好方法就是观察html演示的源代码和源代码
<div class="grid_6"> <p> contact form </p> </div> <div class="grid_3"> <p> name </p> </div>
我不得不做类似的事情，最终把我的半栏设置为46％。 它为填充留下了额外的空间，并使所有的input字段保持一致。
一个答案是蓝图 。 我已经读了你不认为这是答案，但它仍然是我会这样做的方式。 所有表的容易与CSS的所有权力。
随着蓝图的math是非常容易的。 假设您的表单跨越了10列。
<div id="contact-form" class="span-10"> <h3>Contact Form</h3> <form action="contact"> <div id="form-sec-1" class="span-5"> <label>Name</label> <br/> <input type="text" name="name" /> <br/> <label>ZIP code</label> <br/> <input type="text" name="zipcode" /> </div> <div id="form-sec-2" class="span-5 last"> <label>Email</label> <br/> <input type="text" name="email" /> <br/> <label>Country</label> <br/> <input type="text" name="country" /> </div> <div id="form-sec-3" class="span-10 last"> <label>Message</label> <br/> <textarea name="message" /> </div> <div id="form-sec-4" class="span-8"> <input type="checkbox" name="copy"/> <label>Send me a copy</label> </div> <div id="form-sec-5" class="span-2"> <input type="submit"/> </div> </form> </div>
哦，哇，我只是想在世界上是什么事情与CSS世界，然后我看到这个CSS网格布局编辑草案， http://dev.w3.org/csswg/css3-grid-align/
我仍然无法解释为什么CSS世界并没有真正按照这样的思路思考，对于CSS中缺乏这样的特性，会有什么解释呢？
