实现输入字段标签合并

Question

我已将此联系信息部分作为表单的一部分：

<div class="row">
<div class="col s12">
    <i class="material-icons prefix">account_circle</i>
    <input id="nameico" type="text" class="validate">
    <label for="nameico">Contact Name</label>
</div>
<div class="col s12">
    <i class="material-icons prefix">email</i>
    <input id="emailico" type="email" class="validate">
    <label for="emailico">Contact Email</label>
</div>
<div class="col s12">
    <i class="material-icons prefix">phone</i>
    <input id="telico" type="tel" class="validate">
    <label for="telico">Contact Phone</label>
</div>
</div>

但是，所有三个标签都在人名的第一个输入字段内相互重叠。

Answer 1

这是我的代码，它可以帮助你。

JSFiddle链接 - JSFiddle

HTML代码 -

<div class="row">
<div class="col s12 input-field">
    <i class="material-icons prefix">account_circle</i>
    <input id="nameico" type="text" class="validate">
    <label for="nameico">Contact Name</label>
</div>
<div class="col s12 input-field">
    <i class="material-icons prefix">email</i>
    <input id="emailico" type="email" class="validate">
    <label for="emailico">Contact Email</label>
</div>
<div class="col s12 input-field">
    <i class="material-icons prefix">phone</i>
    <input id="telico" type="tel" class="validate">
    <label for="telico">Contact Phone</label>
</div>
</div>