将 Fontawesome-icon 与 w3-input 字段放在同一行

Question

所以我在处理网页时运行在这里解决这个问题。我想用 w3.css（而不是 bootstrap）创建我的第一个表单，它工作得很好。但是在多次尝试在我的文本输入字段前添加一个 fa-Fontawesome-Icon 之后（fa-icon 的高度与文本输入的高度匹配，它们都在同一行），我我现在问社区里的你们 -
如何让 Fontawesome-Icon 达到与文本输入字段相同的高度和相同 row/line？
这是我的代码：

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>

我怎样才能让它工作？
一如既往地提前感谢所有答案，
- 搜索解决方案

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 class。您可以通过简单地为元素提供一个 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> 个标签。

将 Fontawesome-icon 与 w3-input 字段放在同一行

Get Fontawesome-icon into the same line as a w3-input field

html

css

row

font-awesome

w3.css