用于表单的CSS网格系统（带内联标签）

Question

这是follow up to this question，我试图使用相同的多列格式但使用内联标签而不是块标签，例如采用以下模型：

图片中不是很清楚，但name (label) + name (input)应该占据容器宽度的50％（或接近），email label + input同样如此。country (label) country (select) + inlineLabel应占据宽度的100％。

我希望在上述问题中使用相同的HTML / CSS，并通过使用类blockLabel或{{1}}设置标签元素的样式来更改表单的外观。

这可能吗？

PS：我很抱歉这样的痛苦，但形式UI可能是一个应该关心的Web应用程序中最复杂和最重要的方面，整套表单元素也是其中之一风格化最复杂，我想通过创建一个简单的CSS“框架”来简单地解决这个问题。

Answer 1

是的，有可能。您是在寻找有人为您编写代码还是只是寻找一些方向？您可以采用的一种方法是将标签向左浮动，并使用一些定义的宽度。然后您的输入框可以向右（或向左）浮动一些宽度（即50％）。宽度需要以这样的方式定义：两者可以存在于同一级别而不重叠（即，加起来<= 100％的可用空间）。

名称和电子邮件应存在于两列中，但国家/地区和消息行不应与您定义为列的内容一致。

Answer 2

为什么不将列细分为名称和电子邮件的两列，使用重置div，然后使用100％作为国家/地区选择（假设为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>