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

Question

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

图像中不是很清楚，但 name (label) + name (input) 应该占据容器宽度的 50%（或接近），email label + input 也是如此，而 country (label) + @987654328 @ 应该占据 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>

Answer 2

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

姓名和电子邮件应该存在于两列中，但国家和消息行不应延伸到您定义的列中。