Wie Sternchen Zeichen am rechten oberen Textfeld

Question

hier setzen ist mein Code:

<div class="form-group"> 
 
    <label class="control-label col-sm-4">Name</label> 
 
    <div class="col-sm-8"><input type="text" class="form-control" id="id_name" required/> 
 
    <span style="color: red; background-position: right top;">*</span> 
 

 
</div>

aber der Zeichen-Display unter der Textbox, wie die Position der Stern-Zeichen zu beheben oben rechts.

Answer 1

Check this. i think u need it like same. Verwenden Schrift ehrfürchtige

<div class="form-group"> 
    <label class="col-sm-3 control-label"> 
     Username <i class="fa fa-asterisk" aria-hidden="true"></i> 
    </label> 
    <div class="col-sm-7"> 
     <input class="form-control" id="username" name="username" placeholder="Text Field" type="text"> 
    </div> 
</div> 

Answer 2

Sie Sternchen setzen sollten, ob andere Elemente überprüfen oder elemnt Präzisierungen in Ihrem CSS Einfluss auf das Verhalten des Codes haben. Da funktioniert der Code so wie er ist.

die Verwendung von "float" oft Code ändert. Also, wenn Sie viel float verwenden, könnte es die Ursache sein. "display: block" oder andere Anzeigen können helfen, diese Gefühle zu vermeiden.

Aber wie gesagt, sollten Sie Ihr Problem mehr klären.

Answer 3

#marker { 
 
    position: relative; 
 
    left:-15px; 
 
    top:2px; 
 
}

<div class="form-group"> 
 
    <label class="control-label col-sm-4">Name</label> 
 
    <div class="col-sm-8"> 
 
    <input type="text" class="form-control" id="id_name" required/> 
 
    <span id="marker" style="color: red; background-position: right top;">*</span> 
 
    </div>