Question

我觉得这个琐碎的问题很傻，但是，好吧，这一直困扰着我。我有一个样式正确的表单。当用户提交时，如果有错误，表单将再次呈现，但这次，有错误的字段介于<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>

Answer 1

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

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

Answer 2

您也可以尝试：

div.field_with_errors + br {
  display: none
}

这会隐藏紧跟在class_with_errors类的div之后的br标签。

Answer 3

对于这个问题

.text br {
    display: none;
}

默认rails 3是

.field br {
    display: none;
}

Answer 4

如果你正在使用SCSS，你可以这样做：

  .field_with_errors {
    + br {
      display: none;
    }

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

field_with_errors的CSS

4 个答案: