HTML呈現不正確

我正在關注Ruby教程來製作示例應用程序。我做了註冊頁面，但註冊過程中的錯誤正在以一種有趣的方式呈現。錯誤行結束的時間段在它之前。星號和子彈點也在錯誤的一端。HTML呈現不正確

這裏是頁面的源代碼HTML源代碼：

<div class="container"> 
      <h1>Sign up</h1> 
<div class="row"> 
    <div class="span6 offset3"> 
     <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="&#x2713;" /><input name="authenticity_token" type="hidden" value="UPwVQbjK5hdjlsXerJfnAESR61pKf3l/K1u2/05+ILY=" /></div> 
       <div id="error explanation"> 
     <div class="alert alert-error"> 
      The form contains 2 errors. 
     </div> 
     <ul> 
       <li>* Password doesn't match confirmation</li> 
       <li>* Email is invalid</li> 
     </ul> 
    </div>

這是它的外觀：

enter image description here

這個CSS：

#error_explanation { 
    color: #f00; 
    ul { 
     list-style: none; 
     margin: 0 0 18px 0; 
    } 
}

此外，我想提及，輸入字段在輸入光標所在處也有類似的問題在框的右端（如阿拉伯文字）。我解決了一個通過添加direction: ltr;線在我輸入textarea的CSS：

input, textarea, select, .uneditable-input { 
    border: 1px solid #bbb; 
    width: 100%; 
    padding: 10px; 
    height: auto; 
    margin-bottom: 15px; 
    direction: ltr; 
    @include box_sizing; 
}

我TREID在我的CSS添加的方向styleing，但沒有奏效。我想不出別的什麼。請告訴我我哪裏錯了？

來源

2013-04-06 sleeping_dragon

''div id =「error explanation」>'中有空格，請嘗試將其更改爲'error_explanation'，以便刪除列表樣式的CSS與其匹配。 – Sam 2013-04-06 07:41:50

另外事實上，光標在最後表明你有'方向：rtl'或'dir =「rtl」'屬性設置其中一個父元素，這將解釋爲什麼列表顯示右對齊的項目符號。 – Sam 2013-04-06 07:45:04

@Sam原來沒有一個父標記將dir設置爲rtl，但我有一個啓用了rtl語言的默認插件，我刪除了它，但那不起作用。但我嘗試了你的解決方案，他們的工作。謝謝。 :) – 2013-04-06 08:22:37

因此，即使@Sam建議的事情發揮作用，我在網站上的其他地方發現了同樣的問題。我使用方向來修復其中的大部分：ltr。後來當我部署到Heroku時，很多事情都失敗了。當我尋找解決方案時，我發現在部署到Heroku之前需要預編譯我的資產。我正在使用bootstrap。

令人驚訝bundle exec rake assets:precompile解決了localhost以及Heroku上的問題。

所以是的，問題是在資產管道編譯。

來源

2013-04-08 12:06:12

HTML呈現不正確

回答

相關問題