HTML.haml 中的复选框列表

Question

我一直在 rails ruby 中开发一个应用程序，并尝试显示这样的复选框列表
[ ] 冲突解决

[ ] 客户知识

[]个人品牌

但我设法得到了这个

冲突解决

[ ]

客户知道如何

[ ]

个人品牌

[ ]

我的 html.haml 文件看起来像这样

.col-md-6.col-md-offset-3
= form_for(@user) do |f|
  = f.label :conflict_resolution, 'Conflict Resolution'
  = f.check_box :conflict_resolution
  = f.label :customer_know_how, 'Customer Know How'
  = f.check_box :customer_know_how
  = f.label :personal_branding, 'Personal Branding'
  = f.check_box :personal_branding

已尝试 Display:inline 输入类型 = 复选框。没成功！！

Answer 1

使用

input[type='checkbox'] { display: block; float: left; }
input[type='checkbox'] + label { display: block; }

如果您不希望这影响应用程序其他部分（使用相同 css）上的复选框和后续标签的视觉表示，您需要给规则一些 html context 通过在两个规则之前加上一个与其父匹配的选择器（这不同于应用程序的其他 pages/parts 上的所有其他父）。

Answer 2

如果你能改变你的 haml，一个更优雅的解决方案是将标签元素包裹在复选框周围，这样如果你点击标签，它就会激活复选框。

你可以这样做：

= form_for(@user) do |f|
  = f.label(:conflict_resolution) do
    = f.check_box :conflict_resolution
    Conflict Resolution
  = f.label(:customer_know_how) do 
    = f.check_box :customer_know_how
    Customer Know How
  = f.label(:personal_branding) do
    = f.check_box :personal_branding
    Personal Branding

HTML.haml 中的复选框列表

List of checkboxes in HTML.haml

html

css

haml

ruby-on-rails

ruby-on-rails-4