如何将 f.date_select 的月份、日期、年份放在单行上？答案

【问题标题】：How to place month, date, year of f.date_select on single line?如何将 f.date_select 的月份、日期、年份放在单行上？
【发布时间】：2014-11-12 21:06:46
【问题描述】：

我有一个视图 new.html.erb

<div class="container">      
<div class="row">
<div class="col-md-4 col-md-offset-4">
.
.
<%= f.label :date_of_birth %><br />
<%= f.date_select :date_of_birth, { :start_year => 1920, :end_year => 2010 }, :class => 'form-control date-select' %>
.
.
</div>
</div>
</div>

视图 new.html.erb 显示如下

我正在使用 Twitter Bootstrap，但我没有使用 Devise gem。
有什么方法可以在同一行显示所有三个列表框？

【问题讨论】：

你排除了哪些 HTML . . . ？
我跳过了姓名、邮箱、性别、密码、密码确认。

标签： javascript css ruby-on-rails ruby-on-rails-4

【解决方案1】：

您的选择框有form-control 类，它定义了width: 100% 和display: block。这意味着要使它们都采用同一行，您应该用另一个容器包装选择框，然后将它们设置为内联/内联块并设置一些宽度：

<div class="col-md-4 col-md-offset-4">
    ...
    <label>Date of birth</label> 
    <div>
        <select name="date_of_birth" class="form-control date-select"></select>
        <select name="month_of_birth" class="form-control date-select"></select>
        <select name="day_of_birth" class="form-control date-select"></select>
    </div>
    ...
</div>

并为.date-select 类定义此 CSS 样式：

.date-select { 
    display: inline-block;
    width: 30%;
}

插图：http://plnkr.co/edit/00izoqhM3nfquNieFNwe?p=preview

【讨论】：

【解决方案2】：

如果您使用的是 simple_form 和 bootstrap，则可以：

.date select.date.form-control { width: auto; }

【讨论】：

【解决方案3】：

<div class="form-inline">
<%= f.label :expiry_date %><br>    
<%= f.date_select :expiry_date , { discard_day: true }, { :class => 'form-control' } %><br/>

将 data_select 包装在 .form-inline 中就可以了。这也是生成内联表单的引导程序规定的方式。它将 width: 100% 更改为 width: auto 从而允许元素彼此相邻放置

【讨论】：

【解决方案4】：

这更像是一个 CSS 问题，而不是 ruby/rails 问题，但在我的脑海中，我会使用 CSS 将它们全部浮动到同一行，只需添加一个额外的类，然后添加：

.whatever-class { dispaly: inline; }

以上所有元素。

【讨论】：