html - 在输入字段旁边显示图标

Question

我正在努力使 label直接在 input 之上字段，我想要一个图标显示在说 input 的右边 next field 。

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

我可以得到 label在 input 之上使用上面的 CSS。但是我如何获得 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>