javascript - 表单的 CSS 网格系统(带有内联标签)

Question

这是一个 follow up to this question ，我正在尝试使用相同的多列格式，但使用内联标签而不是 block 标签，例如以下模型:

图像中不是很清楚，但是 name (label) + name (input) 应该占容器宽度的 50%(或接近)， email label + input 也是如此，而 country (label) + country (select) 应该占据 100% 的宽度。

我想在上述问题中使用相同的 HTML/CSS，并通过使用类 inlineLabel 或 blockLabel 对标签元素进行样式化来更改表单的外观.

这可能吗？

PS:很抱歉让你这么痛苦，但是表单 UI 可能是 Web 应用程序中应该关心的最复杂和最重要的方面，整套表单元素也是其中之一样式化是最复杂的，我想通过创建一个简单的 CSS“框架”以简单的方式对表单进行样式化来结束这种令人头疼的问题。

Answer 1

为什么不将您的列分割为名称和电子邮件两列，使用重置 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>