Question

我一直在使用ruby on rails上的应用程序并尝试显示这样的复选框列表 []冲突解决方案

[]客户知道如何

[]个人品牌

但我设法得到了这个

冲突解决

[]

客户知道如何

[]

个人品牌

[]

我的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

尝试显示：内联输入类型=复选框。没办法!!

Answer 1

使用

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

如果您不希望这会影响复选框的可视化表示以及应用程序其他部分上的后续标签（使用相同的css），则需要通过将两个规则放在选择器上来为规则提供一些html上下文匹配它的父级（与应用程序的其他页面/部分上的所有其他父级不同）。

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

2 个答案: