jQuery 验证图像位置

Question

我的问题是当我的表单验证成功时，有效图像位于我输入表单的底部位置。我希望图像位于输入框旁边的 -> 正确位置，而不是在下方/下方。

我在 css 中做了 inline-block 但它不起作用需要帮助。

电流输出

有效.png

html:

<form id="validateCF">

<h2 class="col-sm-offset-2">Contact Form</h2> <br />

<div class="form-horizontal">
                    <div class="form-group form-control-group">
                        <label for="name" class="col-sm-2 control-label">Name</label>
                        <div class="col-sm-4">
                            <input type="text" name="name" class="form-control" placeholder="Enter Name..." />
                        </div>
                    </div>

                    <div class="form-group form-control-group">
                        <label for="email" class="col-sm-2 control-label">Email Address</label>
                        <div class="col-sm-4">
                            <input type="email" name="email" class="form-control" placeholder="Enter Email Address..." />
                        </div>
                    </div>

                    <div class="form-group form-control-group">
                        <label for="message" class="col-sm-2 control-label">Message</label>
                        <div class="col-sm-4">
                            <textarea rows="3" name="message" class="form-control" placeholder="Enter Message..."></textarea>
                        </div>
                    </div>
            </div>  
</form>

脚本:

<script type="text/javascript">
$(document).ready(function(){

        $('#validateCF').validate({
        rules: {
           name: {
            required: true,
           minlength: 3
          },

          message: {
                required: true,
                minlength: 6
            },

          email: {
            required: true,
            email: true
            }
        },
            highlight: function(element) {
                $(element).closest('.control-group').removeClass('success').addClass('error');
            },
            success: function(element) {
                element
                .text('OK!').addClass('valid')
                .closest('.control-group').removeClass('error').addClass('success');
            }
      });

});
</script>

CSS:

label.valid {
    width: 24px;
    height: 24px;
    display: inline-block;
    text-indent: -9999px;
    background: url(../images/valid.png) center center no-repeat;
}
label.error {
    font-weight: bold;
    color: red;
    padding: 2px 8px;
    margin-top: 2px;
}

Answer 1

试试这个.control-label{ float: left; }或者试试这个.control-label{ display: inline-block; }