디스플레이 아이콘 다음 입력 필드

Question

에 나는 label이 input 필드의 바로 위에 있도록 그것을 만들려고 노력하고, 나는 아이콘이 다음에 바로 표시 할 input 필드는 말했다.

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

나는 위의 CSS를 사용하여 input 위의 label를 얻을 수 있습니다. 그러나 입력란 옆에 icon을 얻으려면 어떻게해야합니까?

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

입력은

label { 
    display: block; 
} 

input { 
    display: inline-block; 
} 

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