CSS for field_with_errors

我覺得很愚蠢的問這樣一個微不足道的問題，但是，哦，它一直在困擾着我。我有一個正確的樣式。當用戶提交時，如果出現錯誤，表單將再次呈現，但是這次有錯誤的字段僅位於<div class="field_with_errors">之間
知道問題是這樣在文本之後創建了額外的空間，注意到額外的空間Contrasena之後。我怎樣才能擺脫這個空間？CSS for field_with_errors


<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>

來源

2010-11-04 daniel

你需要給我們此頁的'css'以及...的問題似乎是與... – 2010-11-04 19:03:52

試試這個：從被作爲輸出和風格field_with_errors像這樣的HTML中刪除<br />標籤：

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

來源

2010-11-04 19:14:16 leepowers

謝謝，這實際上是％br只謝謝！ – daniel 2010-11-04 21:05:30

對於這個問題

.text br { 
    display: none; 
}

默認軌3是

.field br { 
    display: none; 
}

來源

2011-12-06 17:10:06 aje

您也可以嘗試：

div.field_with_errors + br { 
    display: none 
}

這將隱藏緊跟類field_with_errors的div的BR標籤。

來源

2013-06-05 15:01:38 ReggieB

這在Rails 5.1.1中適用於我。 – 2017-06-02 21:33:16

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

.field_with_errors { 
    + br { 
     display: none; 
    } 

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

來源

2014-08-10 21:30:41 fyz

CSS for field_with_errors

回答

相關問題