轨道单选按钮水平Flexbox的

这是我要解决什么，但我还挺新轨和CSS，我只是能拿到按钮清除标签和所有住在同一行

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

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

预先感谢您

来源

2017-02-17 ETSchmidt

对不起，但我无法重现确切的情况下，因为我没有你的控制器的代码，我想这将是相同的，当你用radio_tags代替text_field标签，但让我知道你是否需要帮助。另外，我建议你检查bootstrap并使用bootstrap，因为它可以使构建响应式网站变得更加轻松快捷。

您可以阅读有关form_for轨道标记和他的所有部件，如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个这样的字段，if你选择10％10个元素将适合一行。显示为块内联允许它们粘在同一行上，因为块元素不会保留在同一行上。有关CSS的更多细节：内嵌/块属性检查此链接： 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

来源

2017-02-18 08:56:10

轨道单选按钮水平Flexbox的

回答

相关问题