Rails form_for布局链接

Question

我的布局目前使用nested_form_for：

代码简单：

    <%= f.label :monday %>           
    <%= f.check_box :monday %>       

    <%= f.label :tuesday %>
    <%= f.check_box :tuesday %>

    <%= f.label :wednesday %>
    <%= f.check_box :wednesday %>

    <%= f.label :thursday %>
    <%= f.check_box :thursday %>

但是我想如果这些属性可以像直线一样列出，例如：

星期一|星期二|星期三|星期四......

nested_form_for中是否有允许这样的设置？

请注意以下是第一个回复生成的HTML

<hr> 
<strong>Day(s) special Will Appear</strong>

<ul id="dayForm">
<label for="campaign_monday">Monday</label>           
<input name="campaign[monday]" type="hidden" value="0" /><input id="campaign_monday" name="campaign[monday]" type="checkbox" value="1" />       

<label for="campaign_tuesday">Tuesday</label>
<input name="campaign[tuesday]" type="hidden" value="0" /><input id="campaign_tuesday" name="campaign[tuesday]" type="checkbox" value="1" />

<label for="campaign_wednesday">Wednesday</label>
<input name="campaign[wednesday]" type="hidden" value="0" /><input id="campaign_wednesday" name="campaign[wednesday]" type="checkbox" value="1" />

<label for="campaign_thursday">Thursday</label>
<input name="campaign[thursday]" type="hidden" value="0" /><input id="campaign_thursday" name="campaign[thursday]" type="checkbox" value="1" />

<label for="campaign_friday">Friday</label>
<input name="campaign[friday]" type="hidden" value="0" /><input id="campaign_friday" name="campaign[friday]" type="checkbox" value="1" />

<label for="campaign_saturday">Saturday</label>
<input name="campaign[saturday]" type="hidden" value="0" /><input id="campaign_saturday" name="campaign[saturday]" type="checkbox" value="1" />

<label for="campaign_sunday">Sunday</label>
<input name="campaign[sunday]" type="hidden" value="0" /><input id="campaign_sunday" name="campaign[sunday]" type="checkbox" value="1" />
</ul>

Answer 1

Rails form_for帮助程序可以帮助您生成HTML;生成的HTML仍然遵循与其他HTML元素相同的规则。 Rails提供了将HTML / CSS添加到表单字段本身的方法，这可能是您正在寻找的。例如，

<%= f.label :monday, :class => 'inline' %>

:class => 'inline'将“内联”类添加到页面上的HTML表单元素中，然后您可以在css文件中将样式添加到.inline {}。

但你也可以简单地做一些事情：

使用<ul>标记

包装表单字段

<ul id="dayForm">
  <%= f.label :monday %>           
  <%= f.check_box :monday %>       

  <%= f.label :tuesday %>
  <%= f.check_box :tuesday %>

  <%= f.label :wednesday %>
  <%= f.check_box :wednesday %>

  <%= f.label :thursday %>
  <%= f.check_box :thursday %>
</ul>

在你的css文件中，

ul#dayForm {
  list-style: none;
}    

ul#dayForm input {
  display: list-item;
  float: left;
  width: 100px; /* adjust depending on desired size */
}

ul#dayForm label {
  display: list-item;
  float: left;
  width: 100px; /* adjust depending on desired size */
}

创建您正在寻找的内联效果。