对齐文本框右侧的图像

Question

我有以下表格，

我想在文本框右侧显示绿色图像，而不是在文本框下方。

如果验证字段，则图像可见。

我的css

<style type="text/css"> 
        .formcontainer{
            border-radius: 10px;  
            -moz-border-radius: 10px; 
            -webkit-border-radius: 10px; 
            box-shadow: 0 0 4px #ccc; 
            -webkit-box-shadow: 0 0 4px #ccc; 
            -moz-box-shadow: 0 0 4px #ccc;  
            border:1px solid #ccc;
            padding:15px;
            width: 300px; 
            margin:0 auto;
        }
        form {
            margin:0 auto; 
            text-align:left;
            width:100%;
            background:#fff;    
            behavior: url(./border-radius.htc);
            font-family:Calibri;
            height: auto;
        }
        fieldset.border{
            overflow:hidden;
            border:1;
            -moz-border-radius:5px;  
            border-radius: 5px;  
            -webkit-border-radius: 5px;
            margin:3px 0;
            padding:10px;
            border:solid 1px #C0C0C0;
        }
        fieldset.no_border{
            overflow:hidden; 
            border:0; 
            padding:0 0 10px 0; 
            margin:0;
        }
        fieldset.no_border_submit{
            overflow:hidden;
            border:0;
            text-align:center;
            margin:3px 0;
        }
        input.effect {

            border:1px solid #ccc;  
            height: 20px;
            padding:3px;
            width:70%;
            font-size:14px;
            -moz-border-radius: 5px;
            -webkit-border-radius: 5px;
            border-radius: 5px;

        }


        .cssSubmitButton {          
            font-size: 12px;
            background: #fff no-repeat 4px 5px;
            display: inline-block;
            padding: 5px 20px 6px;
            color: #333;
            border:1px solid #ccc;
            text-decoration: none;
            font-weight: bold;
            line-height: 1.9em;
            border-radius: 15px;
            -moz-border-radius: 15px;
            -webkit-border-radius: 15px;
            -moz-box-shadow: 0 1px 3px #999;
            -webkit-box-shadow: 0 1px 3px #999;
            position: relative;
            cursor: pointer;
            outline:none;
        }

        .cssSubmitButton:visited {}

        .cssSubmitButton:hover {
            border:1px solid #333;
        }

        #subscribeForm span{
            margin-left: 0px;
            color: #b1b1b1;
            font-size: 11px;
            font-style: italic;
            display:none;
        } 
        fieldset.border{
            overflow:hidden;
            border:1;
            -moz-border-radius:5px;  
            border-radius: 5px;  
            -webkit-border-radius: 5px;
            margin:3px 0;
            padding:10px;
            border:solid 1px #C0C0C0;
        }
        fieldset.no_border{
            overflow:hidden; 
            border:0; 
            padding:0 0 10px 0; 
            margin:0;
        }
        fieldset.no_border_submit{
            overflow:hidden;
            border:0;
            text-align:center;
            margin:3px 0;
        }
        #subscribeForm input.error{
            background: #f8dbdb;
            border-color: #e77776;
        }

        #subscribeForm span.error{
            color: #e46c6e;
            display:block;
        }
        #success{
            display:none;
        }
        #button{
            text-align:center;
        }

    </style>

我的HTML

<div class="formcontainer">
<form method="post" action="" id="subscribeForm" name="subscribeForm">
    <fieldset class="no_border">
        <label>Login ID: </label><br /><input type="text" class="effect" name="login_id" id="login_id"  autocomplete="off" ><img id="login_id_correct" style="display:none" src="./images/tick.png" />
        <span id="login_idInfo">Valid E-mail please, you will need it to log in!</span>
    </fieldset>
    <fieldset class="no_border">
        <label>Name: </label><br /><input type="text" class="effect" name="name" id="name"  autocomplete="off" >
        <span id="nameInfo">What's your name?</span>
    </fieldset>

    <fieldset class="no_border">
        <label>Contact No: </label><br /><input type="text" class="effect" name="contact_no" id="contact_no"  autocomplete="off" >
        <span id="contact_noInfo">Valid E-mail please, you will need it to log in!</span>
    </fieldset>

    <fieldset class="no_border">
        <label>Email: </label><br /><input type="text" class="effect" name="email" id="email"  autocomplete="off" >
        <span id="emailInfo">Valid E-mail please, you will need it to log in!</span>
    </fieldset>

    <fieldset class="no_border">
        <label>Password: </label><br /><input type="password" class="effect" name="password1" id="password1"  autocomplete="off" >
        <span id="password1Info">Valid E-mail please, you will need it to log in!</span>
    </fieldset>

    <fieldset class="no_border">
        <label>Retype: </label><br /><input type="password" class="effect" name="password2" id="password2"  autocomplete="off" >
        <span id="password2Info">Valid E-mail please, you will need it to log in!</span>
    </fieldset>

    <div id="button">
        <input type="submit" value="Subscribe" name="subscribeForm"/>
    </div>
    <div id="success">
        <strong>Data Saved Successfully.</strong>
    </div>
</form>
</div>

还有什么方法可以为它创建一个css类，以便在验证每个文本框后将图像添加到文本框的右侧。

Answer 1

试

fieldset input {
  float:left;
}

如果您已将输入设置为先前阻止，则可能还需要将输入设置为内联或内联块。

http://jsbin.com/akiviw/1/edit

或更改js

$('#login_id_correct').css('display','block')

到

$('#login_id_correct').css('display','inline-block')