【rails5】サイズを指定してもformの長さが同じにならない

Question

【困っていること】

縦に３つ並ぶフォームの長さを揃えたいが　:size=>"　"で指定しても同じ長さになりません。

【現状】

<div class="user-edit">
  <div class="form-group">
    <div class="form-inline">
      <label class="form-edit2">アイコン</label>
      <%= f.file_field :image, :size=>"40",:class => "form-control" %>
    </div>
  </div>

  <div class="form-group">
    <div class="form-inline">
      <label class="form-edit">ユーザー名</label>
      <%= f.text_field :name, :size=>"40", :class => "form-control" %>
    </div>
  </div>

  <div class="form-group">
    <div class="form-inline">
      <label class="form-edit2">自己紹介</label>
      <%= f.text_area :self_introduction, :class => "form-control",:size => "40x3" %>
  </div>
</div>

画像１

となります。全て:size=>"40"と指定しているがサイズに違いがでるのはなぜでしょう。

ちなみに限りなくサイズを合わすために、

上段フォーム：サイズ指定なし
中断フォーム：サイズ４３
下段フォーム：サイズ４２x３

としてみましたが、限りなく同じ長さになりましたが、０.5pxくらいフォームの長さにずれがでました。

細かいことですが、フォームの長さがずれているのは嫌なので質問してみます。

Answer 1

たぶんform-inlineを全部消したら行けると思います。

form-inlineはform内のものを横並びに表示するものなので。
http://bootstrap3.cyberlab.info/css/forms-inline.html
あとform-controlで横幅いっぱいになる設定なのでsize指定(:size=>"40")しても変わらないです。
http://bootstrap3.cyberlab.info/css/forms-basic.html

<div class="user-edit">
  <div class="form-group">
    <div>
      <label class="form-edit2">アイコン</label>
      <%= f.file_field :image, :class => "form-control" %>
    </div>
  </div>

  <div class="form-group">
    <div>
      <label class="form-edit">ユーザー名</label>
      <%= f.text_field :name,:class => "form-control" %>
    </div>
  </div>

  <div class="form-group">
    <div>
      <label class="form-edit2">自己紹介</label>
      <%= f.text_area :self_introduction, :class => "form-control"%>
  </div>
</div>

(追記)
あー前の質問の続きですかね?上のだとまた、前回の問題が出てきますね。
https://teratail.com/questions/154315
いっそのことテーブルにしてもいいかも(?)

<table>
    <tbody>
        <tr>
            <td><label class="form-edit2">アイコン</label></td>
            <td><%= f.file_field :image,:class => "form-control" %></td>
        </tr>
        <tr>
            <td><label class="form-edit">ユーザー名</label></td>
            <td><%= f.text_field :title, :class => "form-control" %></td>
        </tr>
        <tr>
            <td><label class="form-edit2">自己紹介</label></td>
            <td><%= f.text_area :title, :class => "form-control" %></td>
        </tr>
    </tbody>
</table>

Comments

[退会済みユーザー]

回答ありがとうございます。
フォームの幅が整いました。