將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>標籤。