代码之家 › 专栏 › 技术社区 › 3x071c

将Fontawesome图标与w3输入字段放在同一行中

w3.css font-awesome row css html

3x071c · 技术社区 · 8 年前

当我在这里遇到这个问题时,我正在制作一个网页。我想用w3创建我的第一个表单。css(不是引导),它工作得非常好。但在多次尝试添加 fa -在我的文本输入栏前面有一个很棒的图标(fa图标的高度与文本输入的高度相匹配,它们都在同一行),我现在问社区里的朋友们-

这是我的密码:

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>

我怎样才能让它工作?
像往常一样,感谢您提前给出的所有答案,

2 回复 | 直到 8 年前

Maxwell s.c robertklep 8 年前

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>

这就成功了。有更好的方法,但这是基础。可以删除或调整扩展效果。您还可以在图标上使用绝对位置,在容器上使用填充。

UÄur Kaya 8 年前

问题是 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>

推荐文章

jenstar · excel-如何使用randbetween选择整行

1 年前

Demethostes90 · 定义“最后一行”值(在每周增长的图纸上)并在Range对象中使用

1 年前

Sylvia Rodriguez · 基于两列中的组合删除“重复”行(R)

1 年前

Mining · 添加行,复制以前的行值,仅为一列创建新值,仅向新行分配伪值

2 年前

Parn · POWER BI:用度量值显示单元格的值:使用动态索引||计数Dax公式?

2 年前

Shawn Janzen · 找到重复的整行并标记单个R数据帧中的微小差异的更好方法?

2 年前

user912205 · 如何在粘贴到Excel工作表之前使用临时表处理数据

2 年前

sarakhan · Flutter:如何在增加行中容器的高度时不更改文本字段的位置

2 年前

Steve · Excel VBA粘贴到具有可变行的区域

2 年前

Nina · 反应:使所有行的高度相同

2 年前