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;

使用chrome工作，但不能使用firefox

Answer 1

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

您还尝试添加图标以指示某些验证状态。

好消息是，这已经内置于Bootstrap框架中：

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

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

在使用jQuery添加到DOM的span中，添加类名form-control-feedback。
在.form-group块中，添加课程has-error has-feedback
确保id值与连接标签和输入字段的for属性中的相应值相匹配

＆＃13;

$(".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;
});

＆＃13;

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

＆＃13;

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;

在Firefox中显示内联不适合我

3 个答案: