显示图标旁边的输入字段

我试图让这个在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

来源

2017-05-03 MonkeyOnARock

你需要它只是输入后场？ –

是的，所以图标应该是输入字段的*右边*（不在下面，因为它在jsfiddle中）。 – MonkeyOnARock

最简单的改变就是从你的CSS规则中删除_input_：'input，label { display：block;变为'标签{display：block; }' –

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

来源

2017-05-03 22:25:02

你甚至不需要'input {display：inline; }'因为内联是''的默认值 –

必须将输入显示为inline-block的

label { 
    display: block; 
} 

input { 
    display: inline-block; 
}

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

来源

2017-05-03 22:24:48

不，它不需要'inline-block' - 'inline'工作正常，并且是'input'元素的默认显示属性。 –

是的，你可以;但我个人更喜欢inline-block，如果您想稍后添加一些边距和填充以获得更完美的定位。 –

显示图标旁边的输入字段

回答

相关问题