rails 单选按钮水平 flexbox答案

【问题标题】：rails radio buttons horizontal flexboxrails 单选按钮水平 flexbox
【发布时间】：2017-07-06 08:07:35
【问题描述】：

这就是我想要解决的问题，但我对 rails 和 css 有点陌生，我只是可以获得清除标签的按钮，并且所有这些都保持在同一行

.radio {
  display: flex;
  text-align: center;
  label {
    display: block;
  }  
  input {
    width: 30%;
  }
}

		<div class="radio">
  <%= f.label :post_type_eq, "Posts" %>
  <%= f.radio_button :post_type_eq, "post" %>
  <%= f.label :post_type_eq, "Workouts" %>
  <%= f.radio_button :post_type_eq, "workout" %>
  <%= f.label :post_type_eq, "Meals" %>
  <%= f.radio_button :post_type_eq, "meal" %>
</div>

提前谢谢你

【问题讨论】：

标签： css ruby-on-rails radio-button label flexbox

【解决方案1】：

抱歉，我无法重新创建确切的场景，因为我没有你的控制器的代码，我认为当你用 radio_tags 替换 text_field 标签时它会是一样的，但如果你需要帮助。此外，我建议您检查 bootstrap 并使用 bootstrap，因为它将使构建响应式网站变得更加容易和快捷。

您可以在以下链接中了解form_for rails 标签和他的所有组件，例如 radio_button 和 text_field： http://api.rubyonrails.org/classes/ActionView/Helpers/FormHelper.html

对于引导检查此链接： http://getbootstrap.com/

这是我的最终结果，你可以看到所有内容都是内联显示的，我是用 css 做的。我创建了一个div class="row"，它将包含所有 form_for 和输入，这将包含所有内容，并且将包含他的容器的全部内容。所以它看起来像一排。

虽然标签和 text_fields 的宽度仅为父容器的 20%（在这种情况下 form_for 将是 div 类行的完整大小），因此如果您在一行中将适合其中的 5 个字段选择 10% 10 个元素将适合一行。显示为块内联允许它们粘在同一行，因为块元素不会留在同一行。有关 css: inline/block 属性的更多详细信息，请查看此链接： https://www.w3schools.com/cssref/pr_class_display.asp

这是我的css

.row { 
    width: 100%;
    display: block;
    }
.col {
    widht: 20%;
    display: inline-block;
}

这是我的观点

<div class="radio row">
<%= form_for(:player) do |f| %>
  <%= f.label :kingdom, "Kingdom", class: 'col' %>
  <%= f.text_field :kingdom, class: 'col' %>
  <%= f.label :kingdom, "Workouts", class: 'col' %>
  <%= f.text_field :kingdom, class: 'col' %>
  <%= f.label :kingdom, "Other", class: 'col'   %>
  <%= f.text_field :kingdom, class: 'col' %>
<% end %>
</div>

这是我的控制器

class GameController < ApplicationController
  def mainPage
    @post_type_eq = 1
    @array = [1, 2, 3, 4, 5]
    @player = Player.new(:kingdom => "The Roman Empire", :king => "Ceaser", :location_id => 2)
  end
  def gameSettings
    @id = params["id"].to_i
    @page = params[:page]
  end
end

【讨论】：