内嵌式地显示在Firefox

Question

不干活，我你好，我哈瓦在HTML：

  <div class="login"> 
      <form class="form-horizontal signin"> 
       <div class="form-group"> 
        <label for="inputEmail3" class="col-sm-2 control-label">Email : </label> 
        <div class="col-sm-5 more"> 
         <input type="email" class="form-control top" id="emailLogin" placeholder="Email" size="100"> 
        </div> 
       </div> 
       <div class="form-group"> 
        <label for="inputPassword3" class="col-sm-2 control-label">Password : </label> 
        <div class="col-sm-5 passLog"> 
         <input type="password" class="form-control" id="passwordLogin" placeholder="Password"> 
        </div> 
       </div> 
       <div class="form-group"> 
        <div class="col-sm-offset-2 col-sm-10"> 
         <button type="submit" class="btn btn-default">Sign in</button> 
        </div> 
       </div> 
      </form> 
     </div> 

和我jQuery的哈瓦验证码：

$(".signin").submit(function(){ 
    $('.error').remove(); 
    var hasError = false; 
    if($.trim($("#emailLogin").val())=="") 
    { 
     $(".more").append('<span class="glyphicon glyphicon-remove error" role="alert"></span>'); 
     hasError = true; 
    } 
    if($.trim($("#passwordLogin").val())=="") 
    { 
     $(".passLog").append('<span class="glyphicon glyphicon-remove error" role="alert"></span>'); 
     hasError = true; 
    } 
    if(hasError == true) 
     return false; 
    else 
     return true; 
}); 

跨度显示块结构 ，我该怎么显示一个内联结构

在CSS需要解决的是：

display:inline; 

工作中铬，但不能在Firefox 帮助，请

Answer 1

根据代码段中的类名称，使用Bootstrap。

你也尝试添加一个图标，指示一些验证状态。

的好消息是，这已经内置到引导框架：

http://getbootstrap.com/css/#forms-control-validation

您需要在代码中添加一些额外的自举类名，如下图所示。

1. 在您添加到使用jQuery的DOM的span，添加类名form-control-feedback。

2. 在.form-group块，添加类has-error has-feedback

3. 确保id值匹配的for属性的相应值连接您的标签和输入框

$(".signin").submit(function(){ 
 
    $('.error').remove(); 
 
    var hasError = false; 
 
    if($.trim($("#emailLogin").val())=="") 
 
    { 
 
     $(".more").append('<span class="glyphicon glyphicon-remove error form-control-feedback" role="alert"></span>'); 
 
     hasError = true; 
 
    } 
 
    if($.trim($("#passwordLogin").val())=="") 
 
    { 
 
     $(".passLog").append('<span class="glyphicon glyphicon-remove error form-control-feedback" role="alert"></span>'); 
 
     hasError = true; 
 
    } 
 
    if(hasError == true) 
 
     return false; 
 
    else 
 
     return true; 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha256-7s5uDGW3AHqw6xtJmNNtr+OBRJUlgkNJEo78P4b0yRw= sha512-nNo+yCHEyn0smMxSswnf/OnX6/KwJuZTlNZBjauKhTK0c+zT+q5JOCx0UFhXQ6rJR9jg6Es8gPuD2uZcYDLqSw==" 
 
crossorigin="anonymous"> 
 
<div class="login"> 
 
    <form class="form-horizontal signin"> 
 
    <div class="form-group has-error has-feedback"> 
 
     <label for="emailLogin" class="col-sm-2 control-label">Email :</label> 
 
     <div class="col-sm-5 more"> 
 
     <input type="email" class="form-control" id="emailLogin" placeholder="Email"> 
 
     </div> 
 
    </div> 
 
    <div class="form-group has-error has-feedback"> 
 
     <label for="passwordLogin" class="col-sm-2 control-label">Password :</label> 
 
     <div class="col-sm-5 passLog"> 
 
     <input type="password" class="form-control" id="passwordLogin" placeholder="Password"> 
 
     </div> 
 
    </div> 
 
    <div class="form-group"> 
 
     <div class="col-sm-offset-2 col-sm-10"> 
 
     <button type="submit" class="btn btn-default">Sign in</button> 
 
     </div> 
 
    </div> 
 
    </form> 
 
</div>

Answer 2

只需添加以下

display: -moz-inline-stack; 
     display: inline-block; 
     vertical-align: top; 

代替

display:inline; 

更多参考：Cross-Browser Inline-Block

Answer 3

width:90%; 
display:-moz-inline-stack;