css - Rails 3.1 - 有错误的字段

Question

我正在使用 Rails 辅助方法来构建表单，并使用验证。

只要这些验证之一失败，rails 就会将相应的输入和标签包装在 field_with_errors 标记中。这很好。

但是，由于某些原因，rails 将输入和标签包装在不同的 div 中，使得样式设置变得非常困难:

例如:

<div class="field">
    <div class="field_with_errors">...label...</div>
    <div class="field_with_errors">..input ...</div>
</div>

我需要的是:

<div class="field">
    <div class="field_with_errors">...label & input...</div>
</div>

有谁知道我如何实现这一目标？

Answer 1

一种方法是用 span 替换 div，这不会破坏格式，因为它们不是 block 级元素。为此，请将其放在初始化程序中的某个位置:

ActionView::Base.field_error_proc = Proc.new do |html_tag, instance|
  "<span class=\"field_with_errors\">#{html_tag}</span>".html_safe 
end

另一种方法是简单地使原始 div 不显示为 block 级元素，并在 CSS 文件中使用此行:

.field_with_errors { display: inline-block; }

但是 some of the older browsers 并不完全支持这一点(看看你的 IE6 和 7)。