这是一个 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“框架”以简单的方式对表单进行样式化来结束这种令人头疼的问题。
最佳答案
为什么不将您的列分割为名称和电子邮件两列,使用重置 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>
关于javascript - 表单的 CSS 网格系统(带有内联标签),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/1949312/