重叠文本字段内的字体真棒图标

Question

在如下所示的重叠中,如何防止标题和文本字段之间的大空间？

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

CSS:

<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>

结果可以在这个小提琴中看到

谢谢.

Answer 1

就个人而言,我只是使用一个伪元素,但如果你想使用这个<i>图标,那么我们可以通过使用position:absolute而不是更好地做到这一点position:relative.添加position:relative只是移动图标,但留下它将采取的空间.position:absolute不会离开那个空间.

我们需要确保将父包含(标签)设置为position:relative,以便图标将相对于父级而不是整个页面绝对定位.

HTML

#mail_form label {
  position: relative;
}

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

CSS

<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>

结果

小提琴

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