表单的CSS网格系统（多列） [英] CSS Grid System for Forms (Multi-Column)

问题描述

今后的参考是像素完美精度的最终结果：

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>用户名< / label>< input id =in_usertype =textvalue =/>< / p& 
< / div> 
 
< div class =_ 50> 
< p>< label for =in_pass> Password< / label>< input id =in_passtype =textvalue =/>< / p& 
< / div> 
  

---

最近我开始使用CSS网格系统我发现设计网页的整个过程更简单。现在我想尝试对表单元素进行样式化，但我很难用列创建表单，请参考以下示例：

• div（width = 400px）
  
  
  
  
  • 表单
    
    
    
    
    • ul
      
      
      
      
      • li .half
        
        
        
        
        • 标签
        
        
        • 输入（应为200像素宽）
        
        
      
      
      • li .half
        
        
        
        
        • 另一个标签
        
        
        • 另一个输入（也应为200像素宽）
        
        
      
      
    
    
  
  

应用一个宽度属性为50％的类，但并排放置两个输入使该行大于100％（400像素） - 我想这是因为边框，边距和paddings 。

有任何CSS网格系统，我可以使用多列表单，同时仍然使所有的表单元素具有相同的大小（输入，选择和textareas）;例如。 1列中的1个输入应该有400像素，而2列应该各有200像素。

编辑：Wufoo has some examples of what I

如果有人可以给我一些指针，解决方案

检查： http://www.noupe.com/design/ultimate-guide-to-grid-based-web-design.html

有是你需要知道的一切，包括css api和模板

编辑：这里是我的最终解决方案与fluid960 css模板

这里有一个图形示例。当然，您可以通过编辑css轻松更改颜色。

For future reference here is the final result with pixel perfect precision:

The CSS code:

._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;
}

And some sample HTML code:

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

---

Recently I've started using CSS grid systems and I find the whole process of designing a webpage much more simpler. Now I'm trying to stylize form elements but I'm having a really hard time making forms with columns, take the following example:

• div (width = 400px)
  • form
    • ul
      • li .half
        • label
        • input (should be 200px wide)
      • li .half
        • another label
        • another input (should also be 200px wide)

Basically I'm applying a class that has a width attribute of 50% but putting both inputs side by side makes the row to be bigger than 100% (400px) - I guess this is because of borders, margins and paddings.

Is there any CSS grid system that I can use to have multi-column forms while still making all the form elements have the same size (inputs, selects and textareas); eg. 1 input in 1 column should have 400px while 2 columns should have 200px each.

EDIT: Wufoo has some examples of what I'm trying to do but I'm too ignorant at CSS to understand all that code and I would appreciate if someone could give me some pointers.

解决方案

check this out : http://www.noupe.com/design/ultimate-guide-to-grid-based-web-design.html

there is everything you need to know, including css api and templates

EDIT : here's my final solution with fluid960 css template

And here's a graphical example. Of course, you can easily change the colors by editing the css.

这篇关于表单的CSS网格系统（多列）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！