使用simple_form和zurb基础创建内联date_select下拉列表

我在我的rails应用程序中使用Simple_Form和Zurb Foundation。

一个或多个视图的表单具有以下date_select

表单字段显示堆叠而不是内联。 我已经检查了所有内容，无法弄清楚如何正确显示这些内容。

我错过了什么？ 您可以在event.html.erb视图中看到https://github.com/stanrails/momtomom上的回购。

该部分的代码如下：

Answer 1

其中一个解决方法是手动设置这样的东西：

 form.custom .dropdown.date{ width: 30%; margin-right: 10px; float: left; } 

Answer 2

这是另一个我想分享的内容，最终看起来像这样：

一点点html！

  div[class="row"] div[class="large-12 columns select-date-wrapper"] = f.date_select(:birthdate, options = { start_year: DateTime.now.year - 18, end_year: DateTime.now.year - 75, order: [:month, :day, :year], include_blank: true}, html_options = { class: 'select-date'}) 

有点sass！

 select.select-date { width: 30%; margin-right: 10px; float: left; } .select-date-wrapper{ select:first-of-type{ width: 45%; } select:nth-of-type(2){ width: 20%; } select:last-of-type{ margin-right: 0; } } 

Answer 3

我通过检查html并更改相关标签的css解决了同样的问题：

<%= f.date_select :date %>产生：

“Invoice”是这里的型号名称。 因此，在你的CSS中你可以添加

 #yourModel_date_1i, #yourmodel_date_2i, #yourmodel_date_3i { width: 30%; } 

一个简单的解决方案。