rails单选按钮水平flexbox

Question

Click here to see form

这就是我想要解决的问题，但我对rails和css有点新意，我可以通过按钮来清除标签，并且所有按钮都保持在同一行

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

提前谢谢

Answer 1

很抱歉，但我无法重新创建确切的方案，因为我没有控制器的代码，我认为将text_field代码替换为radio_tags时会相同，但是如果您需要帮助，请告诉我。另外，我建议你检查bootstrap并使用bootstrap，因为它可以更容易，更快地构建响应式网站。

您可以在以下链接中阅读form_for rails标签及其所有组件，如radio_button和text_field： http://api.rubyonrails.org/classes/ActionView/Helpers/FormHelper.html

对于bootstrap，请检查此链接： 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