field_with_errors 的 CSS答案

【问题标题】：CSS for field_with_errorsfield_with_errors 的 CSS
【发布时间】：2010-11-04 18:56:40
【问题描述】：

我觉得问这样一个微不足道的问题很愚蠢，但是，哦，好吧，这已经困扰了我一段时间了。我有一个样式正确的表格。当用户提交时，如果有错误，表单将再次呈现，但这一次，有错误的字段只是在<div class="field_with_errors">
知道问题是这会在文本之后创建一个额外的空间，请注意 Contrasena 之后的额外空间。我怎样才能摆脱这个空间？


<div class="field_with_errors"><input id="user_email" name="user[email]" size="30"      type="text" value=""></div>>

这是一个完整的 HTML 示例，以便您可以准确地看到我在说什么：


<html><head>
    <title>foo</title>
  </head>
  <body>
    <header>
    </header>
    <section class="container">
      <div class="formbox">
        <h1>Registrarse</h1>
        <form accept-charset="UTF-8" action="/users" class="new_user" id="new_user" method="post"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="✓"><input name="authenticity_token" type="hidden" value="nP/JKdZYGviu1y/+nyxyvKBUHuJzsAbkZRQgX87UIy8="></div>
          <!-- = render 'shared/error_messages', :object => f.object -->
          <div class="text">

<label for="user_email">Email</label>
            <br>
            <div class="field_with_errors"><input id="user_email" name="user[email]" size="30" type="text" value=""></div>
          </div>
          <div class="text">
            <div class="field_with_errors"><label for="user_password">Contrasena</label></div>
            <br>
            <div class="field_with_errors"><input id="user_password" name="user[password]" size="30" type="password" value=""></div>
          </div>
          <div class="text">
            <label for="user_password_confirmation">Confirmacion</label>
            <br>
            <input id="user_password_confirmation" name="user[password_confirmation]" size="30" type="password" value="">
          </div>
          <div class="actions">
            <input class="button_green" id="user_submit" name="commit" type="submit" value="Registrarse">
          </div>
        </form>
      </div>
    </section>
    <footer>
    </footer>

</body></html>

【问题讨论】：

您还需要将此页面的css 提供给我们......因为问题似乎与此有关......

标签： html ruby-on-rails css

【解决方案1】：

试试这个：从正在输出的 HTML 中删除 <br /> 标记，并像这样设置 field_with_errors 的样式：

.field_with_errors {
  display: block;
  clear: both;
}

【讨论】：

【解决方案2】：

你也可以试试：

div.field_with_errors + br {
  display: none
}

这会隐藏紧跟在 field_with_errors 类的 div 之后的 br 标记。

【讨论】：

【解决方案3】：

如果您使用的是 SCSS，您可以这样做：

  .field_with_errors {
    + br {
      display: none;
    }

    input, select {
      border: 1px solid red;
    }
  }

【讨论】：

【解决方案4】：

关于这个问题

.text br {
    display: none;
}

默认rails 3是

.field br {
    display: none;
}

【讨论】：