css - 在文本字段中重叠 Font Awesome 图标

Question

在像下面这样的重叠中，如何防止标题和文本字段之间的大空间？

.icon-link-mail {
  position: relative;
  left: 485px;
  top: 29px;
  padding: 8px 8px 7px 8px;
  z-index: 2
}

<h3>Title</h3>
<form name="mail_form" id="mail_form" method="POST" action="">
  <label for="sendto">
              <a href="#"><i class="icon-envelope icon-2x icon-link-mail" style="color:#E4E4E4; text-decoration:none"></i></a>
              <input name="sendto" class="sendto" type="text" style="width: 98%; margin-bottom:10px" placeholder="Send to.." />
              </label>
</form>

结果可以在这个fiddle中看到

Answer 1

我个人只会使用伪元素，但如果您想使用 <i>图标，那么我们可以通过使用 position:absolute 来做得更好而不是 position:relative .添加position:relative只是移动图标，但留下它本来会占用的空间。 position:absolute不会离开那个空间。

我们需要确保将父包含(标签)设置为 position:relative但是，这样图标将相对于父页面而不是整个页面绝对定位。

#mail_form label {
  position: relative;
}

.icon-link-mail {
  position: absolute;
  z-index: 2;
  right: 0;
}

<h3>Title</h3>
<form name="mail_form" id="mail_form" method="POST" action="">
  <label for="sendto">
        <a href="#"><i class="icon-envelope icon-2x icon-link-mail" style="color:#E4E4E4; text-decoration:none"></i></a>
        <input name="sendto" class="sendto" type="text" style="width: 98%; margin-bottom:10px" placeholder="Send to.." />
     </label>
</form>

结果

fiddle

http://jsfiddle.net/Ay6Hw/4/