表单的CSS网格系统（带内联标签） [英] CSS Grid System for Forms (with Inline Labels)

问题描述

这是 跟进此问题 ，我想尝试使用相同的多列格式，但使用内嵌标签而不是块标签，请使用以下模型：

This is a follow up to this question, I'm trying to have the same multi-column format but with inline labels instead of block labels, take the following mockup for instance:

图片不是很清楚， name（label） + name（input）应占据容器宽度的50％同样适用于电子邮件标签+输入，而国家（标签） + 选择）应占据宽度的100％。

It's not very clear in the image but the name (label) + name (input) should occupy 50% (or near that) of the container width, the same goes for the email label + input, while the country (label) + country (select) should occupy 100% of the width.

我想使用与上述问题相同的HTML /通过使用类 inlineLabel 或 blockLabel 对标签元素进行样式化来显示表单的外观。

I would like to have the same HTML / CSS used in the question mentioned above and change the appearance of the form by stylizing label elements with a class inlineLabel or blockLabel.

这是可能吗？

PS：对不起，这是一个痛苦的屁股，但形式UI可能是最一个应用程序应该关心的一个Web应用程序的复杂和重要方面，整套表单元素也是最复杂的样式之一，我想通过创建一个简单的CSS框架来风格化形式结束这种头痛

推荐答案

为什么不将您的列细分为两列名称和电子邮件，重置div，然后对国家选择使用100％（假设Grid960）：

Why not subdivide you column into two columns for the Name and Email, use a reset div, then use 100% for the country select (assumes Grid960):

<div class="grid_10">
  <div class="alpha grid_5">
    Name <input id="Name" type="text"/>
  </div>
  <div class="omega grid_5">
    Email<input id="Name" type="text"/>
  </div>
  <div class="clear"/>
</div>
<div class="clear"/>
<div class="grid_10">

</div>

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