Question

我有div元素，里面有一个span元素，而在这个元素中，我有一个i元素，但是i标签从span和{{ 1}}元素。

实际上我想在输入字段中放入眼睛图标

这是我当前的代码，我该怎么办？

div

.fa-eye {
  float: right;
  display: flex;
}

.fa-eye {
  position: absolute;
  z-index: 5;
  display: block;
}

Answer 1

如果使用position：absolute，则需要确定哪个元素是position：相对。另外，您需要确定“子”的位置在哪里（例如，我要放在左侧）。

最后一件事，在使用头寸时不需要使用浮点数：向左/向右。

看看下面的代码：

    .eye{
        position: absolute;
    }
      
      .fa-eye {
        position: relative;
        left: 143px;
        display: flex;
      }

 <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
   <span >
        <input class="eye" placeholder="term">
        <i class="fa fa-eye"></i>
    </span>

Answer 2

基于此评论：

实际上我想在输入字段中留眼

您可以检查以下替代方法：

（1）如果要使用font-awesome之类的placeholder图标作为输入，则可以使用Unicode Cheatsheet。在下一个示例中，我向您展示如何执行此操作：

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>

<input type="text" class="fa" placeholder="&#xf06e; term">

（2）另一方面，如果您想在输入中包含一个固定的静态图标，则可以使用以下内容：

.input-icon {
  position: absolute;
  left: 3px;
  color: rgb(0, 128, 255);

  /* Vertically center the icon in the input */
  top: calc(50% - 0.5em);
}

#myInput {
  padding-left: 25px;
}

.custom-wrapper {
  position: relative;
}

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
 
<div class="custom-wrapper">
  <input type="text" placeholder="term" id="myInput">
  <i class="fa fa-eye input-icon"></i>
</div>

在输入元素中使用真棒字体图标

2 个答案: