用于表单的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宽)

基本上我应用一个具有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中缺乏这样的特性,会有什么解释呢?