Javascript 用于html输入的Fa图标

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

提前谢谢

。消息框{
位置：绝对位置；
最高：93%；
调整大小：无；
左：25%；
宽度：70%；
左侧填充：20px；
边界半径：5px；
}
.fa-paper-plane-o{
位置：绝对位置；
最高：95%；
左：92%；
}

---

使用

position:absolute

没有任何意义，但无论如何，您可以做一个技巧，用

div

将

文本区域和
图标
包装起来，然后使用
float
使两个元素并排排列


。消息框{
调整大小：无；
边界：无；
宽度：92%；
大纲：无；
身高：100%；
显示：块；
浮动：左；
}
#包装纸{
位置：相对位置；
宽度：70%；
边框：1px实心#bfbf；
边界半径：5px；
溢出：隐藏；
位置：绝对位置；
底部：0；
右：0；
}
#包装跨度{
显示：块；
浮动：对；
宽度：7%；
文本对齐：居中；
位置：相对位置；
顶部：6px；
}
我建议您将所有内容包装在一个div中，使其成为绝对值，然后使用正常流管理其中的内容。然后，您可以将填充应用到文本区域的两侧，并使用图标上的负边距进行重叠：


。消息{
位置：绝对位置；
底部：0；
左：25%；
右：0；
}
.留言箱{
调整大小：无；
填充：0 25px；
宽度：90%；
边界半径：5px；
框大小：边框框；
}
.fa-paper-plane-o{
位置：绝对位置；
左边距：-30px；
边缘顶部：5px；
垂直对齐：顶部；
}
我认为他使用了绝对位置，使聊天停留在页面底部。。。我认为他想建立一种经典的小部件，聊天总是出现在底部