CSS 在 simple_form_for 中实现行内显示的单选按钮

在本文中，我们将介绍如何使用CSS在simple_form_for中实现行内显示的单选按钮。simple_form_for是一个用于简化Rails表单生成的Gem，而行内显示的单选按钮可以让我们的表单更加美观和直观。

阅读更多：CSS 教程

什么是simple_form_for

simple_form_for是一个用于生成HTML表单的Ruby Gem，它简化了表单的编写过程，使得我们可以用更少的代码生成更强大和可定制的表单。它提供了众多的表单元素生成方法，并且允许我们通过自定义class和样式来美化表单。

在simple_form_for中使用单选按钮

在simple_form_for中使用单选按钮非常简单，我们只需要在表单中使用:as => :radio_buttons选项即可。

<%= simple_form_for @user do |f| %>
  <%= f.input :gender, :as => :radio_buttons %>
  <%= f.button :submit %>
<% end %>

上面的代码中，@user是一个用户对象，f.input :gender表示生成一个针对用户性别的选择框。:as => :radio_buttons选项告诉simple_form_for生成一个单选按钮组，而不是默认的下拉列表。通过这样的方式，我们可以轻松地将单选按钮嵌入到我们的表单中。

定制单选按钮的样式

simple_form_for本身并没有提供单选按钮的样式定制，这就需要我们使用CSS来进行样式定制。下面是一个示例，展示如何使用CSS实现行内显示的单选按钮。

label.radio-inline {
  margin-right: 10px;
}

input[type="radio"][name="user[gender]"] {
  display: inline-block;
  width: 16px;
  height: 16px;
  margin: 0;
  vertical-align: middle;
}

上面的CSS代码将单选按钮的标签和输入框都定义为行内元素，并且设置了一些基本的样式。通过这样的定制，我们可以让单选按钮在一行内显示，并且具有一致的样式。

示例

假设我们现在有一个用户注册表单，其中包含了性别的选择。我们希望用户在注册时能够直接在表单中选择性别，而不是使用下拉列表。我们可以使用simple_form_for来生成表单，并使用上面提到的CSS样式来定制单选按钮。

<%= simple_form_for @user do |f| %>
  <%= f.input :gender, :as => :radio_buttons %>
  <%= f.button :submit %>
<% end %>

label.radio-inline {
  margin-right: 10px;
}

input[type="radio"][name="user[gender]"] {
  display: inline-block;
  width: 16px;
  height: 16px;
  margin: 0;
  vertical-align: middle;
}

通过上面的代码，我们可以在表单中实现行内显示的单选按钮，具有自定义的样式。