带有复选框的简单表单内联输入答案

【问题标题】：Simple form inline input with check boxes带有复选框的简单表单内联输入
【发布时间】：2017-10-31 01:21:06
【问题描述】：

我的表单目前有一个这样的表单：

这个简单的表单代码非常简单（使用horizontal_form类）：

<%= f.input :taxes %>

但是，在输入数据时，大多数情况下人们都知道他们的年税，但很少知道月税。所以我需要一些不同的用户体验，而不是让它们一直分开并记住，这就是我想出的。

我不确定如何使用 simple_form 实现这个 HTML，但是上面的屏幕是从这个 HTML 呈现的：

<div class="form-group row decimal optional calculator_taxes"><label class="col-sm-3 col-form-label control-label decimal optional" for="calculator_taxes">Taxes</label><div class="col-sm-5"><input class="form-control numeric decimal optional" type="number" step="any" value="0.0" name="calculator[taxes]" id="calculator_taxes"></div>
<div class="form-check form-check-inline">
  <label class="form-check-label">
    <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="Yearly">Yearly</label>
</div>
<div class="form-check form-check-inline">
  <label class="form-check-label">
    <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2">Monthly</label>
</div></div>

如何将这 2 个带有无线电 <div class="form-check form-check-inline"> 的 div 以简单的形式添加到现有的输入 HTML 中？

【问题讨论】：

只是想知道这些问题与 ruby 甚至 ruby on rails 有什么关系？
@KickButtowski 我将问题读作“如何使用 ruby/simple_form 生成此 HTML
@KickButtowski 用 HTML 很容易解决这个问题。我在 ruby on rails 视图中使用 simple_form，完全不同的游戏

标签： html css ruby-on-rails ruby simple-form

【解决方案1】：

我相信您在问如何将所有这些元素对齐在一条直线上，在这种情况下，您只需将display: inline-block; 用于包含所有这些元素的父 div。或者您可以使用 flexbox 在 div 中垂直和水平对齐它们

【讨论】：

我可以将它们与 HTML 对齐，但我实际上不知道如何使用简单的表单来实现