css - rails 单选按钮水平 flexbox

Question

Click here to see form

这就是我想要解决的问题，但我对 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>

提前致谢

Answer 1

抱歉，但我无法重新创建确切的场景，因为我没有您的 Controller 代码，而且我认为当您将 text_field 标签替换为 radio_tags 时，情况会相同，但如果您需要帮助，请告诉我。此外，我建议您检查 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 和输入，这将包括所有内容，并且它将包含他的容器的全部内容。所以它看起来像一排。

虽然 labels 和 text_fields 的宽度仅为父容器的 20%(在本例中，form_for 将是 div 类行的完整大小)，因此一行将适合其中的 5 个字段，如果您选择 10% 10 个元素将适合一行。 Display as block-inline 允许它们停留在同一行，因为 block 元素不会停留在同一行。有关 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>

这是我的 Controller

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