Question

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

提前致谢。

＆＃13;

.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%;
}

＆＃13;

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

＆＃13;

Answer 1

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

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

Answer 2

我建议你将所有内容包装在一个你绝对的div中，然后使用普通流来管理其中的内容。然后，您可以将填充应用于textarea的两侧，并在图标上使用负边距进行重叠：

＆＃13;

id = seq(1:30)
amount = c(30185, 33894, 33642, 29439, 27879 ,52347, 4101, 5425,
            6541, 54589, 5214, 1000, 45000, 64125, 100021, 120000, 
            657412, 15224,4578, 3639, 10000, 48781, 64484, 5020,
            15001, 105050, 14521, 59822, 42871, 32542)

df = data.frame(id, amount)
df$group = cut(df$amount,c(10000, 20000, 30000, 40000, 50000, 60000, 70000))

＆＃13;

.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;
}

＆＃13;

Fa输入的图标

2 个答案: