代码之家 › 专栏 › 技术社区 › 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>

推荐文章

Jamie · 在CSS链接的文件名中添加Jinja占位符

10 月前

Mass · 如何在Tailwind CSS v4中创建配置

11 月前

magenta placenta · 将css变量合并为一个变量

11 月前

ptownbro · 重叠分区标签,同时保持以下所有分区和内容就位

11 月前

Luke Frost IEng MIMechE · Bootstrap 5.3在Div中的项目位置没有如我所期望的那样显示

11 月前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

11 月前

john Rizzo · 按钮背景颜色、悬停和活动状态存在问题

11 月前

Ben Halicki · 带有垂直和水平滚动条的表,使用HTML/CSS/Bootstrap-5固定行和列

11 月前

Luckkks · 过渡色工作不正常

11 月前

ModernEraCaveman · 如何对齐我的Bootstrap容器以适应网页的整个宽度?

11 月前