我正在使用RoR,我正在使用Simple_Form gem作为我的表单.我有一个对象关系,用户可以有多个角色,在创建过程中,管理员可以选择要应用于新用户的角色.我希望角色在左边有他们的复选框,他们的名字在右边是一个横向排列的.
//
“框”管理员
//
而不是现在的
//
“框”
//
<div class="control-group">
<%= f.label 'Roles' %>
<div class="controls">
<%= f.collection_check_Boxes
:role_ids,Role.all,:id,:name %>
</div>
</div>
我最关心的部分是f.collection_check_Boxes生成这样的代码.
<span> <input blah blah /> <label class="collection_check_Boxes" blah>blah</label> </span>
这让我很难在那里得到一个css类,因为有3个组件必须被触动.我已经尝试添加诸如虚拟类的东西到：html哈希,但是虚拟类甚至不会显示在渲染的html中.
任何帮助是极大的赞赏
编辑：解决方案
感谢Baldrick,我的工作erb看起来像这样.
<%= f.collection_check_Boxes :role_ids,:name,{:item_wrapper_class => 'checkBox_container'} %>
而我的CSS如下
.checkBox_container { display: inline-block; vertical-align: -1px; margin: 5px; } .checkBox_container input { display: inline; } .checkBox_container .collection_check_Boxes{ display: inline; vertical-align: -5px; }
解决方法
根据
doc of collection_check_boxes,有一个选项item_wrapper_class给一个css类到包含复选框的span.像这样使用
<%= f.collection_check_Boxes :role_ids,:item_wrapper_class => 'checkBox_container' %>
和CSS样式保持复选框和标签在同一行：
.checkBox_container input { display: inline; }