将复选框和标签与 collection_check_box 对齐答案

【问题标题】：Align Checkbox and Label with collection_check_box将复选框和标签与 collection_check_box 对齐
【发布时间】：2014-01-22 11:32:59
【问题描述】：

我和这里的发帖者有同样的问题Align checkboxes for f.collection_check_boxes with Simple_Form

我的复选框代码是：

<%= f.collection_check_boxes :investor_city_ids, r.cities, :id, :name, {:item_wrapper_class => 'checkbox_container'} %>

但是我在生成的 HTML 中看到没有为生成的 HTML 设置类

<input id="investor_investor_city_ids_1" name="investor[investor_city_ids][]" type="checkbox" value="1">
<label for="investor_investor_city_ids_1">Hamilton</label>
<input id="investor_investor_city_ids_2" name="investor[investor_city_ids][]" type="checkbox" value="2">
<label for="investor_investor_city_ids_2">Cambridge</label>

我也尝试了不带 {} 大括号的 collection_check_boxes 代码，但似乎没有任何效果。

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;
 }

【问题讨论】：

有任何 CSS 供我们查看吗？
已添加。我的问题是该类未包含在生成的 HTML 中。
你碰巧在使用Zurb的基金会吗？
如果您可以在 jsbin 或实时版本链接中进行设置，我可以为您提供帮助。

标签： ruby-on-rails ruby-on-rails-4

【解决方案1】：

检查docs。您需要为要添加的类指定 item_wrapper_tag。你也可以使用 collection_wrapper_tag + class。

让我们知道它是否有效。

总账和高频

【讨论】：

感谢您的回复。我将集合更改为 'ul', :item_wrapper_tag => 'li', :item_wrapper_class=> 'checkbox_container'} % > 但是，HTML 仍然没有使用应用的类或标签呈现。知道我做错了什么吗？

【解决方案2】：

已修复 - 我正在使用 form_for，更改为 simple_form_for 解决了这个问题。不知道为什么它不适用于 form_for。

【讨论】：

因为form_for 使用另一个API，并且不创建包装div。