Anzeigesymbol neben dem Eingabefeld

Question

Ich versuche, es zu machen, so dass die label direkt auf der Oberseite eines input Feld ist, und ich möchte ein Symbol rechts neben anzuzeigen sagte input Feld.

@import url("//fonts.googleapis.com/icon?family=Material+Icons"); 
 

 
input, 
 
label { 
 
    display: block; 
 
}

<div> 
 
    <label for="username">Username</label> 
 
    <input id="username" placeholder="Username" class=""> 
 
    <i class="material-icons">accessibility</i> 
 
</div>

kann ich die label über dem input unter Verwendung der obigen CSS erhalten. Aber wie bekomme ich die icon neben dem Eingabefeld? kurz nach dem Eingabefeld

JS Fiddle

Answer 1

@import url("//fonts.googleapis.com/icon?family=Material+Icons"); 
 

 
label { 
 
    display: block; 
 
} 
 

 
input{ 
 
    display:inline; 
 
    }

<div> 
 
    <label for="username">Username</label> 
 
    <input id="username" 
 
     placeholder="Username" 
 
     class=""> 
 
    <i class="material-icons">accessibility</i> 
 
</div>

Answer 2

Der Eingang muss

label { 
    display: block; 
} 

input { 
    display: inline-block; 
} 

als Inline-Block angezeigt werden

https://jsfiddle.net/51zrg6ms/2/