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

Question

这是一个，我尝试使用相同的多列格式，但是使用内联标签而不是块标签，就拿下面的模型为例：

​

在图像中不太清楚，但是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>

Answer 2

是的，这是可能的。你是在找人给你编码，还是只是想找个大致的方向呢？您可以这样做的一种方法是用定义的宽度将标签向左浮动。然后，您的输入框可以以一定的宽度(即)向右(或向左)浮动。50%)。宽度需要以这样的方式来定义，即两者都可以在同一水平上存在，而不存在重叠(即。加起来，<=是您可用空间的100% )。

名称和电子邮件应该在两列中存在，但是国家和消息行不应该在您定义为列的内容中扩展。