形式化语义形式布局问题答案

【问题标题】：formtastic semantic form layout question形式化语义形式布局问题
【发布时间】：2011-04-04 13:01:46
【问题描述】：

在formtastic中，创建语义表单时，对象属性的布局默认总是垂直列出（一个属性标签和值占一行）。

如何自定义布局，使部分属性处于水平位置。例如，我想让“body”属性位于“title”的右侧。怎么做？

<% semantic_form_for @post do |form| %>
    <% form.inputs do %>
      <%= form.input :title %>
      <%= form.input :body %>
      <%= form.input :section, :as => :radio %>
      ...

【问题讨论】：

标签： ruby-on-rails ruby-on-rails-3 formtastic

【解决方案1】：

Formtastic 在包装器 <li> 和其他地方提供了许多 HTML class 和 id 钩子，以便您可以为不同的输入设置样式（例如 li.string）或特定输入不同（例如li#user_email_input）。

正如其他答案所述，您可以使用:wrapper_html => { :class => 'whatever' } 向包装器添加额外的类，以便在上述选项不合适时为自己提供新的钩子。

从这里开始，这纯粹是一个样式/CSS 问题。您可能希望使用 float:left; 将 <li> 包装器相互浮动，然后使用 overflow:auto; 或您喜欢的任何其他清除技术清除包含 <ol> 上的浮动。

【讨论】：

【解决方案2】：

您可以使用 CSS 来完成此任务：

<%= form.input :title, :wrapper_html => {:class => "left"} %>

然后在你的样式表中：

.left
{
  float: left;
  /* etc. */
}

这将为表单元素的容器设置样式（默认为li）

【讨论】：

请不要使用内联样式。只需分配一个类/ID并使用外部样式表对其进行样式设置。
我同意，以上仅作为示例。事实上，我会编辑我的答案。
我试过了，但是不行，比如我想把'section'放在'body'的右边，我用了 {:class=> "left"} %>，在 css 文件中，我定义了 .left { float: left; }
你需要将身体向左浮动，而不是部分。

【解决方案3】：

您只需更改 CSS。但是，如果您需要针对特定属性进行布局自定义，我建议您自己构建表单元素。

【讨论】：