Rails form_forにおけるラジオボタンについて、配列での表示の仕方がわからない

Question

現在railsにて投稿フォームを作成しております。

ラジオボタンを作成しているのですが、配列にならず全て縦に配置されてしまいます。

display :inline-block 等試しましたが上手くいかずで困っております。
どのように記述すれば配列で綺麗なフォームが作れるかご教授いただけますと幸いです。

##keeps_new.html.erb

<div class="container">
    <%= form_for(@keep) do |f| %>
--一部省略--
      <div class="field">
        <span><%= f.label :gender, "性別：" %></span>
        <%= f.radio_button :gender, "男の子" %>男の子
        <%= f.radio_button :gender, "女の子" %>女の子<br>
      </div>
      <div class="field">
        <span><%= f.label :size, "体格：" %></span>
        <%= f.radio_button :size, "大型" %>大型
        <%= f.radio_button :size, "中型" %>中型
        <%= f.radio_button :size, "小型" %>小型<br>
      </div>
      <div class="field">
        <span><%= f.label :collar, "首輪：" %></span>
        <%= f.radio_button :collar, "有" %>有
        <%= f.radio_button :collar, "無" %>無
        <%= f.radio_button :collar, "不明" %>不明<br>
      </div>
      <div class="field">
        <span><%= f.label :text, "備考：" %></span>
        <%= f.text_area :text, class:"PPP" %><br>
      </div>
        <%= f.submit "送信", class: "btn2" %>
      </div>
    <% end %>
  </div>
</div>

##keeps_controller.rb

class KeepsController < ApplicationController
    before_action :move_to_index, expect: :index
  
  def index
    @keeps = Keep.includes(:user).page(params[:page]).per(30).order("created_at DESC")
  end
  
  def new
    @keep = Keep.new
  end
  
  def create
    Keep.create(date: keep_params[:date], area: keep_params[:area], kind: keep_params[:kind], color: keep_params[:color], details: keep_params[:details], gender: keep_params[:gender], size: keep_params[:size], collar: keep_params[:collar], text: keep_params[:text], image: keep_params[:image], user_id: current_user.id)
  end
  
--一部省略--
end

下記現状のラジオボタン画面です。

何卒よろしくお願いします。

Comments

[kei344]

「配列にならず」とありますが、HTMLには「配列」は無いと思います。どのように並べたいのかを具体的に追記することをお勧めします。

[yastinbieber]

ご返信ありがとうございます。

理解が浅く申し訳ございません。
結局widthを100％にしてしまっているだけでした。

ありがとうございました。

Answer 1

このような形で、ひとまずいかがでしょうか?

<label><%= f.radio_button :gender, "男の子" %>男の子</label>

label {
  display: flex;
  align-items: baseline;
}

Comments

[yastinbieber]

ご返信ありがとうございます。

結局自身のミスでwidthを100％にしてしまっているだけでした。
無事解決できました。

ご親切にありがとうございました！