Q&A
出力されたHTML（ブラウザで「ページのソースを表示」）を質問文に追記ください。
###前提・実現したいこと
名前、パスワード、生年月日を入力するフォームにおいて生年月日を入力する部分だけを横並びにしたい。
生年月日の入力にはf.date_selectを利用しているため、年、月、日それぞれに入力エリアがある。
レイアウトはBootstrapを用いて作成している。
###該当のソースコード
<% provide(:title, "SignUp") %> <h1>SignUp</h1> <div class="container"> <div class="row"> <div class="col-md-12"> <%= form_for(@user) do |f| %> <%= f.label :name %> <%= f.text_field :name %> <%= f.label :pass %> <%= f.password_field :pass %> <%= f.label :birthday %> <%= raw sprintf( f.date_select( :birthday, :use_month_numbers => true, :start_year => Time.now.year - 50, :end_year => Time.now.year, date_separator: '%s'), '年', '月') + '日' %> <%= f.submit "Create my account", class: "btn btn-primary" %> <% end %> </div> </div> </div> HTML出力文 <!DOCTYPE html> <html> <head> <title>Home |LifetimeApp</title> <link rel="stylesheet" media="all" href="/assets/application-6b1f6a1866026c77a66c9bcca65bc91ec946313e50be1ce1622273aa79ef4b37.css" data-turbolinks-track="true" /> <script src="/assets/application-af0a262c47892cf8b2a798b13d3eba4b8bf59292c45baed5daf326fac3ff24ee.js" data-turbolinks-track="true"></script> <meta name="csrf-param" content="authenticity_token" /> <meta name="csrf-token" content="lsaoZmeVjPuAKa06CaQjdEmOhNcgqc9lCb/+ZbBvVs0imkXYgii9kdpfm7qqRNBpp6LAihIQNPu1ej9aDHcdsA==" /> </head> <body> <header class="navbar navbar-fixed-top navbar-inverse"> <div class="container"> <a id="logo" href="/">LifetimeApp</a> </div> </header> <div class="container"> <div class="row"> <div class="col-xs-12"> <h1>入力した年齢までの残り日数を表示します</h1> <div class="center jumbotron"> <form action="/calculate" accept-charset="UTF-8" method="post"><input name="utf8" type="hidden" value="✓" /><input type="hidden" name="authenticity_token" value="YKF+Fb/VNJ7JWuc+SzNiiQqICkjbk5KE85irPpIH2fDU/ZOrWmgF9JMs0b7o05GU5KROFekqaRpPXWoBLh+SjQ==" /> <div class="inputbirth"> <label class="birthdaylabel" for="birthday">生年月日</label> <select id="birthday_birthday_1i" name="birthday[birthday(1i)]" class="form-control bootstrap-date"> <option value=""></option> <option value="1916">1916</option> <option value="1917">1917</option> <option value="1918">1918</option> <option value="1919">1919</option> <option value="1920">1920</option> <option value="1921">1921</option> <option value="1922">1922</option> <option value="1923">1923</option> <option value="1924">1924</option> <option value="1925">1925</option> <option value="1926">1926</option> <option value="1927">1927</option> <option value="1928">1928</option> <option value="1929">1929</option> <option value="1930">1930</option> <option value="1931">1931</option> <option value="1932">1932</option> <option value="1933">1933</option> <option value="1934">1934</option> <option value="1935">1935</option> <option value="1936">1936</option> <option value="1937">1937</option> <option value="1938">1938</option> <option value="1939">1939</option> <option value="1940">1940</option> <option value="1941">1941</option> <option value="1942">1942</option> <option value="1943">1943</option> <option value="1944">1944</option> <option value="1945">1945</option> <option value="1946">1946</option> <option value="1947">1947</option> <option value="1948">1948</option> <option value="1949">1949</option> <option value="1950">1950</option> <option value="1951">1951</option> <option value="1952">1952</option> <option value="1953">1953</option> <option value="1954">1954</option> <option value="1955">1955</option> <option value="1956">1956</option> <option value="1957">1957</option> <option value="1958">1958</option> <option value="1959">1959</option> <option value="1960">1960</option> <option value="1961">1961</option> <option value="1962">1962</option> <option value="1963">1963</option> <option value="1964">1964</option> <option value="1965">1965</option> <option value="1966">1966</option> <option value="1967">1967</option> <option value="1968">1968</option> <option value="1969">1969</option> <option value="1970">1970</option> <option value="1971">1971</option> <option value="1972">1972</option> <option value="1973">1973</option> <option value="1974">1974</option> <option value="1975">1975</option> <option value="1976">1976</option> <option value="1977">1977</option> <option value="1978">1978</option> <option value="1979">1979</option> <option value="1980">1980</option> <option value="1981">1981</option> <option value="1982">1982</option> <option value="1983">1983</option> <option value="1984">1984</option> <option value="1985">1985</option> <option value="1986">1986</option> <option value="1987">1987</option> <option value="1988">1988</option> <option value="1989">1989</option> <option value="1990">1990</option> <option value="1991">1991</option> <option value="1992">1992</option> <option value="1993">1993</option> <option value="1994">1994</option> <option value="1995">1995</option> <option value="1996">1996</option> <option value="1997">1997</option> <option value="1998">1998</option> <option value="1999">1999</option> <option value="2000">2000</option> <option value="2001">2001</option> <option value="2002">2002</option> <option value="2003">2003</option> <option value="2004">2004</option> <option value="2005">2005</option> <option value="2006">2006</option> <option value="2007">2007</option> <option value="2008">2008</option> <option value="2009">2009</option> <option value="2010">2010</option> <option value="2011">2011</option> <option value="2012">2012</option> <option value="2013">2013</option> <option value="2014">2014</option> <option value="2015">2015</option> <option value="2016">2016</option> </select> 年<select id="birthday_birthday_2i" name="birthday[birthday(2i)]" class="form-control bootstrap-date"> <option value=""></option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> <option value="6">6</option> <option value="7">7</option> <option value="8">8</option> <option value="9">9</option> <option value="10">10</option> <option value="11">11</option> <option value="12">12</option> </select> 月<select id="birthday_birthday_3i" name="birthday[birthday(3i)]" class="form-control bootstrap-date"> <option value=""></option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> <option value="6">6</option> <option value="7">7</option> <option value="8">8</option> <option value="9">9</option> <option value="10">10</option> <option value="11">11</option> <option value="12">12</option> <option value="13">13</option> <option value="14">14</option> <option value="15">15</option> <option value="16">16</option> <option value="17">17</option> <option value="18">18</option> <option value="19">19</option> <option value="20">20</option> <option value="21">21</option> <option value="22">22</option> <option value="23">23</option> <option value="24">24</option> <option value="25">25</option> <option value="26">26</option> <option value="27">27</option> <option value="28">28</option> <option value="29">29</option> <option value="30">30</option> <option value="31">31</option> </select> 日 </div> <br> <br> <div class="inputage"> <input type="number" name="age" id="age" min="1" max="120" /> 歳までの日数を計算<br> </div> <input type="submit" name="commit" value="計算する" class="btn btn-lg btn-primary" /> </form> </div> </div> </div> </div> </body> </html>
###試したこと
class="form-inline",class="form-group"等を指定してみたが、横並びにはならなかった。
###補足情報(言語/FW/ツール等のバージョンなど)
開発環境：cloud9で開発
rails 4.2.2
Bootstrap-sass 3.2.0.0
ご教授いただければ幸いです。
よろしくお願いいたします。
回答1件
0
ベストアンサー
css
1.form_date_select { 2 display: inline-block; 3 width: auto; 4}
こんな感じのを読み込んでいるCSSファイルに追加して、各select要素のclassにform_date_selectと追加してあげれば横並びになると思います。
CSSファイルに追加するのが厳しい場合は少々不格好ですが、style="display: inline-block;width: auto;"と直接select要素に記述してください。
投稿2016/09/17 18:41
総合スコア2722
あなたの回答
tips
プレビュー
