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，但没有奏效。我想不出别的什么。请告诉我我哪里错了？

''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上的问题。

所以是的，问题是在资产管道编译。

HTML呈现不正确

相关推荐