需要内联日期、月份和年份选择标签答案

【问题标题】：Need to inline the date, month and year select tags需要内联日期、月份和年份选择标签
【发布时间】：2025-12-28 00:35:11
【问题描述】：

我在编辑用户个人资料页面中有一个生日字段，如图所示，

我希望它以这种方式水平显示

到目前为止，我正在使用以下代码，

在访问者/edit.html.erb 中，

<%= simple_form_for([@user],:url => visitor_path(@user), method: :put, :class => 'form form-horizontal') do |f| %>
  <%= f.label :birthday %>      
  <div class="form-group">
    <div class="col-sm-2">
      <%= birthday_field_for(f, end_year: Date.today.year) %>
    </div>
  </div>
<% end %>

在 application_helper.rb 中，

def birthday_field_for(form,options={})
  date_field_for(form,:birthday,options.reverse_merge!(start_year: Date.today.year - 90, end_year: Date.today.year - 13))
end

def date_field_for(form,field,options={})
  form.date_select(field, options.reverse_merge!(order: [:day, :month, :year],
                                               include_blank: true))
end

请帮我解决 css 问题。

【问题讨论】：

你能贴出你的 html 和 css 的小提琴
你的容器可能太小了。简单的表单日期输入自然是内联的
@Aru 请检查jsfiddle.net/cofa5hx8。这里有点好。但不在我的应用程序中。
@sakshi，希望您只显示选择框（user_birthday_3i、user_birthday_2i、user_birthday_1i）作为输出，而其他 div（s2id_user_birthday_3i、s2id_user_birthday_2i、s2id_user_birthday_1i）用于您的操作！如果是，那么您可以编写一个类似... (.col-sm-2 div{display:none;}) 的 CSS 来解决您的问题

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

【解决方案1】：

感谢回答的人！

选择容器的宽度设置为 100%。因此，下一个选择选项卡出现在新行中。

在visitors/edit.html.erb 中添加一个css，确实解决了我的问题，

<% content_for :head_css do %>
  <style type="text/css">
    .select2-container {
      width: 120px !important;
    }
  </style>
<% end %>

【讨论】：