field_with_errors的CSS

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

你也可以嘗試：

div.field_with_errors + br {
  display: none
}

這會隱藏緊跟在類field_with_errors的div之后的br標簽。

Answer 2

試試這個：從正在輸出的HTML中刪除<br />標記，並像這樣樣式field_with_errors ：

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

Answer 3

如果您使用SCSS，您可以這樣做：

  .field_with_errors {
    + br {
      display: none;
    }

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

Answer 4

對於這個問題

.text br {
    display: none;
}

默認rails 3是

.field br {
    display: none;
}

field_with_errors的CSS

問題描述

4 個解決方案

解決方案1
3 2013-06-05 15:01:38

解決方案2
3 已采納 2010-11-04 19:14:16

解決方案3
0 2014-08-10 21:30:41

解決方案4
0 2011-12-06 17:10:06

field_with_errors的CSS

問題描述

4 個解決方案

解決方案1 3 2013-06-05 15:01:38

解決方案2 3 已采納 2010-11-04 19:14:16

解決方案3 0 2014-08-10 21:30:41

解決方案4 0 2011-12-06 17:10:06

解決方案1
3 2013-06-05 15:01:38

解決方案2
3 已采納 2010-11-04 19:14:16

解決方案3
0 2014-08-10 21:30:41

解決方案4
0 2011-12-06 17:10:06