いつもお世話になっております。
個人でポートフォリオを作っています。
言語はhtml css ruby フレームワークはrails5を使用しています。
今回、サインアップ・ログイン画面を作成するにあたり、フォームをtableタグで作成しました。
tableタグの下にdivタグで囲ったsubmitを記入しているが、そのdivタグがどうしても浮いてしまいます。
以下、コードと画像です。
初学者なので読みづらいかもしれませんが、ご容赦ください。
new.html.erb
ruby
1<div class="wrapper"> 2 <div class="resistration-wrapper"> 3 <h2>サインアップ</h2> 4 <table class="form-table"> 5 <%= form_for(resource, as: resource_name, url: registration_path(resource_name)) do |f| %> 6 <tbody> 7 <%= render "devise/shared/error_messages", resource: resource %> 8 <tr> 9 <th>名前</th> 10 <td><%= f.text_field :name, placeholder: "suke", id: "name" %></td> 11 </tr> 12 <tr> 13 <th>メールアドレス</th> 14 <td><%= f.email_field :email, placeholder: "mitekurete@arigatou.com" %></td> 15 </tr> 16 <tr> 17 <th>パスワード</th> 18 <td><%= f.password_field :password, autocomplete: "new-password", placeholder: "arigatou" %></td> 19 </tr> 20 <tr> 21 <th>パスワード確認</th> 22 <td><%= f.password_field :password_confirmation, autocomplete: "new-password", placeholder: "arigatou" %></td> 23 </tr> 24 </tbody> 25 <div class="action-wrapper"> 26 <%= f.submit "サインアップ", class: "action" %> 27 </div> 28 <% end %> 29 30 31 </table> 32 33 </div> 34</div>
application.css
ruby
1/* start resistration css */ 2.resistration-wrapper > h2 { 3 color: #cc2931; 4} 5table { 6 border-collapse: collapse; 7 background-color: rgba(228, 218, 171, 0.5); 8} 9 10.form-table, 11input, 12select, 13button { 14 -moz-appearance: none; 15 -webkit-appearance: none; 16 -webkit-box-shadow: none; 17 border: none; 18 outline: none; 19 box-shadow: none; 20} 21 22.form-table input { 23 background: #f8f8f8; 24 display: block; 25 font-size: 16px; 26 padding: 12px 15px; 27 width: 480px; 28 transition: 0.8s; 29 border-radius: 3px; 30} 31 32 33.form-table input:focus { 34 background: #e9f5fb; 35 box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); 36} 37.form-table input#name { 38 width: 240px; 39} 40 41input::placeholder { 42 color: #ccc; 43} 44.form-table { 45 width: 100%; 46} 47.form-table th, 48.form-table td { 49 padding: 20px; 50} 51 52.form-table th { 53 padding-left: 50px; 54 position: relative; 55 text-align: left; 56 width: 300px; 57 color: #cc2931; 58 font-size: 20px; 59} 60 61.form-table input.action { 62 width:150px; 63 background: #313186; 64 color: #f5f5ff; 65} 66 67/* end resistraiton css */
サインアップと書かれたsubmitボタンが浮いてしまいます。
理想はパスワード情報のinputタグの右端に揃えたいです。
ご教示いただければ幸いです。
よろしくお願い致します。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/03/11 18:03