用于 html 输入的 Fa 图标

Question

我正在创建一个聊天系统，我注意到文本与我的图标重叠我如何防止这种情况发生我希望它在点击图标之前转到下一行。

提前致谢。

.message_box {
  position: absolute;
  top: 93%;
  resize: none;
  left: 25%;
  width: 70%;
  padding-left: 20px;
  border-radius: 5px;
}
.fa-paper-plane-o {
  position: absolute;
  top: 95%;
  left: 92%;
}

<textarea rows="2" cols="50" name="messages" class="message_box" placeholder="Write a message"></textarea>
    <i class="fa fa-paper-plane-o" aria-hidden="true" style="font-size: 20px;"></i>

Answer 1

我建议您将所有内容包装在一个绝对的 div 中，然后使用正常流程管理其中的内容。然后，您可以将 padding 应用到 textarea 的两侧，并在图标上使用 负边距 进行重叠：

.message {
  position: absolute;
  bottom: 0;
  left: 25%;
  right: 0;
}

.message_box {
  resize: none;
  padding: 0 25px;
  width: 90%;
  border-radius: 5px;
  box-sizing: border-box;
}

.fa-paper-plane-o {
  position:absolute;
  margin-left: -30px;
  margin-top: 5px;
  vertical-align: top;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet">
<div class="message">
  <textarea rows="2" cols="50" name="messages" class="message_box" placeholder="Write a message"></textarea>
  <i class="fa fa-paper-plane-o" aria-hidden="true" style="font-size: 20px;"></i>
</div>

Answer 2

你使用position: absolute 没有任何意义，但无论如何，你可以做一个技巧，用div 包裹你的textarea 和icon，然后使用float 使两个元素并排。

.message_box {
    resize: none;
    border: none;
    width: 92%;
    outline: none;
    height: 100%;
    display: block;
    float: left;
}

#Wrapper {
    position: relative;
    width: 70%;
    border: 1px solid #bfbfbf;
    border-radius: 5px;
    overflow: hidden;
    position: absolute;
    bottom: 0;
    right: 0;
}

#Wrapper span {
    display: block;
    float: right;
    width: 7%;
    text-align: center;
    position: relative;
    top: 6px;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">

<div id="Wrapper">
  <textarea rows="2" cols="50" name="messages" class="message_box" placeholder="Write a message"></textarea>
  <span><i class="fa fa-paper-plane-o" aria-hidden="true" style="font-size: 20px;"></i></span>
</div>