Question

所以我在网页上工作，因为我在这里遇到了这个问题。我想用w3.css（不是bootstrap）创建我的第一个表单，它工作得非常好。但是在多次尝试在我的文本输入字段前面添加fa - Fontawesome-Icon（fa-icon的高度与文本输入的高度相匹配，它们都在同一行中）时，我现在问你们社区里的人们了吗？如何将Fontawesome-Icon设置为文本输入字段的相同高度和相同行/行？这是我的代码：

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类。您可以通过简单地为元素提供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输入字段放在同一行

2 个答案: