Question

以下参考是像素完美精度的最终结果：

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
    - li。半
      - 标签
      - 输入（宽度应为200px）
    - li。半
      - 另一个标签
      - 另一个输入（也应该是200px宽）

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

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

编辑：Wufoo has some examples我正在尝试做什么，但我对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

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

<!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，而不是无序的列表项。

当你坚持使用百分比时，不要指望它在所有浏览器中都是像素完美的。如果你想让它完全像素，你真的需要使用像素。

Answer 4

我认为这就是你要找的东西：

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

它应该有助于简化您的结构。它没有明确地描述如何制作多个列形式，但是这种技术可能会扩展到具有一定创造力的技术。

Answer 5

此处不需要使用流体960系统，除非您希望表单扩展并与浏览器签约。

我会建议常规的旧960 grid system。 960宽度非常适合网格，因为它均匀分为12和16，这使您可以设置像素完美的三列和四列布局。

熟悉960网格系统的最佳方法是查看源{c}和html demo

的来源

<div class="grid_6">
        <p>
            contact form
        </p>
    </div>

<div class="grid_3">
        <p>
            name
        </p>
    </div>

Answer 6

我必须做类似的事情，最后将我的半列设置为46％。它为填充留下了额外的空间，并使所有输入字段的大小一致。

Answer 7

一个答案是Blueprint。我已经读过你认为不是答案的地方，但它仍然是我做的方式。具有CSS全部功能的所有表的易用性。

使用蓝图，数学非常简单。假设您的表单跨越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>

Answer 8

哇哇，我只是在思考世界上什么是css世界的问题然后我看到这个css网格布局编辑草稿，http://dev.w3.org/csswg/css3-grid-align/

我仍然无法解释为什么css世界并没有真正考虑过这样的问题，css中缺少这样一个功能会有什么解释。

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

8 个答案: