Javascript 表单的CSS网格系统（多列）

以下是具有像素完美精度的最终结果供将来参考：

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）
  • 形式
    • 保险商实验室
      • 李，一半
        • 标签
        • 输入（应为200px宽）
      • 李，一半
        • 另一个标签
        • 另一个输入（也应为200px宽）

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

是否有任何CSS网格系统可用于创建多列表单，同时仍使所有表单元素具有相同的大小（输入、选择和文本区域）；1列中的1个输入应具有400px，而2列中的每列应具有200px

---

EDIT:Wufoo了解我正在尝试做什么，但我对CSS太无知，无法理解所有代码，如果有人能给我一些建议，我将不胜感激。我想这就是你想要的：

---

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

此处不需要fluid 960系统，除非您希望表单与浏览器一起扩展和收缩

我推荐普通的老款。960宽度对于网格来说是非常好的，因为它被12和16平均分割，这允许您设置像素完美的三列和四列布局

熟悉960网格系统的最好方法是查看源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>

姓名：


地址:


城市：
声明：
邮编：

我不得不做一些类似的事情，最终将我的半列设置为46%。它为填充留出了额外的空间，并使所有输入字段的大小保持一致。

首先，不要使用表格。将表单元素放入表中并不能解决问题，而且会使维护复杂化。使用表格来补充表单表示是不称职和复杂的表现。它也是完全非语义的。实际上，您可能需要编写一些CSS。老实说，如果您打算将表用于非表格数据，那么甚至不用麻烦使用CSS，因为这会增加维护的复杂性

以下是一些需要记住的事情：

1） 以“em”单位定义所有单位。大多数表单元素旨在包含文本。这些元素，如文本字段和文本区域块，可以作为可访问性的一项功能进行增减。这意味着您的像素完美的漂亮CSS网格将在用户更改页面上的文本大小时被打破

2） 不要将表单元素包装在div中。与div一样，表单也是块级元素。除非表单在div父节点下有对等节点，否则只需将任何表示直接指向表单元素，而不是仅存在用于包含表单的父元素

3） 将表单元素分组。如果您是浮动文本字段，那么如果表单独立于各自的标签元素浮动，那么事情可能会变得一团糟。在表单中放置一个有序的列表，然后将每个表单元素包装在一个列表项中会更容易。这样，您只需考虑定义标签元素相对于其表单控件的布局，然后通过定义列表项的表示方式将它们一起布局。此方法也是语义的，它将表单控件的顺序通知文本读者

4） 不要使用这个工具！重要宣言。这有助于快速修复CSS，但会完全破坏继承，并使维护变得非常复杂。相反，在第一次正确地编写代码时要花额外的时间，这样以后的维护工作就变得简单快捷了

5） 不要使用绝对位置，除非你真的知道你在做什么，即使你的表单被设置为相对位置。在许多情况下，在意外行为和意外问题中定位绝对结果

6） 为了确保CSS代码实际定义了真正的网格，请使用FirefoxMeasureIT插件。它将帮助你达到惊人的准确性，并节省你难以置信的时间，使你的网格

---

7） 第一次正确地做每件事，使用尽可能少的代码完成工作并完美地呈现表单。然后才测试表单的跨浏览器准确性。每次对跨浏览器的准确性进行一次更正，以限制CSS代码不必要的膨胀。

以下是一个可能有用的基本启动示例：

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

字段集{宽度：400px；填充：1%；}
输入[type=text]，选择，文本区域{宽度：98%；}
.half{float:左；宽
<!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>

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