Rails /HTML /CSS】input要素を枠ごと右寄せにしたいときはどのようなCSSをかくと良いのでしょうか？

解決したいこと

ご覧いただきありがとうございます。

現在、Ruby on Railsで画像投稿アプリを作成しているものです。
[%= f.text_field %]を使用して投稿用のフォームを作成していたのですが、配置をうまく変えることができず苦戦しております。

(上記、コードにタグを付けると表示されなくなってしまうため、[]で囲っています)

発生している問題

以下のものを、２枚目の画像のように作成したいと思っています。

↓

作成したいビュー

しかし実際の状況が１枚目のようになっておりまして、自分の思うように配置することが難しい状況でした。
現在の記述は以下になります。

現在の記述

HTML

   <div class="form__wrapper new">

      <div class="post__field">

        <div class="field__flex">
            <%= f.label :age, "作った年齢（半角数字）" %>
            <div class="need">必須</div><br />
        </div>
        <div class="field__flex__age">
        <%= f.text_field :age, class: :form__age %>
        <p>歳</p>
        </div>
      </div>
  </div>

CSS

.new{
 width: 100%;
}

.post__field{
  margin-bottom: 30px;
}

.post__field label{
  color: #818181;
  font-size: 16px;
}

.form__age{
  width: 100px;
  margin-right: auto;
}

.field__flex__age{
  display: flex;
}

.field__flex__age p{
  font-size: 20px;
}

お力添えいただけると大変助かります。
よろしくお願いいたします。

行動規範の内容に同意します

回答3件

私もRailsはよく分かりませんが、.field__flex__ageのルールに
justify-content: flex-end;
を追記でどうでしょうか。
.form__ageにmargin-right: auto;がありますが、他に余分なマージンが効いてなければ上記で大丈夫かと思われます。その上で、margin-right: .5em;など適当な余白を空ければ、うまくいきませんでしょうか。

投稿2022/05/21 06:52