将Fontawesome-图标放入与w3输入字段相同的行

Question

因此，当我在此处遇到此问题时，我正在处理网页。我想用w3.css（不是bootstrap）创建我的第一个表单，它工作得很好。但在尝试多次在我的文本输入字段前面添加fa -Fontawesome-Icon（fa-icon的高度与文本输入的高度匹配，它们都在同一行中）之后，我现在要求你们在那里的社区 -
我怎样才能得到Fontawesome-图标到相同的高度和相同的行/行的文本输入字段？
Here's我的代码：

body { 
 
    background-color: black; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> 
 
<link href="https://www.w3schools.com/w3css/4/w3.css" rel="stylesheet"/> 
 
<form class="w3-container w3-white"> 
 
    <div class="w3-row-padding"> 
 
    <div class="w3-col m12"> 
 
     <i class="fa fa-envelope-o fa-2x fa-fw" aria-hidden="true"></i><p><input class="w3-input w3-animate-input" type="text" placeholder="E-Mail" style="width: 50%;"></p> 
 
    </div> 
 
    </div> 
 
</form>

我怎样才能得到这个工作？
感谢事先所有的答案，一如既往，
- SearchingSolutions

Answer 1

body { 
 
    background-color: black; 
 
} 
 
.input-icon{ 
 
    float:left; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> 
 
<link href="https://www.w3schools.com/w3css/4/w3.css" rel="stylesheet"/> 
 
<form class="w3-container w3-white"> 
 
    <div class="w3-row-padding"> 
 
    <div class="w3-col m12"> 
 
     
 
<p> 
 
<i class="fa fa-envelope-o fa-2x fa-fw input-icon" aria-hidden="true"></i> 
 
<input class="w3-input w3-animate-input" type="text" placeholder="E-Mail" style="width: 50%;"> 
 
</p> 
 
    </div> 
 
    </div> 
 
</form>

该做的伎俩。有更好的方法，但这是基地。您可以删除或调整展开效果。您也可以使用图标上的绝对位置和容器上的填充。

Answer 2

问题是input元素继承了display: block.w3-input类。您可以通过简单地给该元素设置一个ID并设置display: inline来覆盖此内容。添加这些：

#inline-input { 
    display: inline; 
} 

*

<input id = "inline-input" class="w3-input w3-animate-input" type="text" placeholder="E-Mail" style="width: 50%;"> 

编辑：同时删除<p></p>标签。