如何使发送按钮“粘”到屏幕底部的消息输入字段？

问题描述 投票：0回答：1

我正在制作一个聊天室应用程序，我需要消息输入字段与发送按钮内联，并且它们都位于屏幕底部的固定位置。


--------------------THIS IS THE HTML--------------------

<div class="msg-inputs">
        <input class="msg-input" type="text" rows="3" placeholder="Message" name="message" id="message" onkeydown="handleKeyDown(event)" />
        <button class="send-btn" type="button" name="send" id="send-btn" onclick="sendMessage()">Send</button>
      </div>
</div>

--------------------THIS IS THE CSS--------------------

.msg-inputs .msg-input[type=text] {
    width: 80%;
    position: fixed;
    bottom: 0;
    left: 1;
    overflow: auto;
    justify-content: center;
    background-color: #181818;
}

.msg-inputs .send-btn{
    background-color: #181818; 
    color: #ff9e3d;
    border: 2px solid #ff9e3d;
    position: fixed;
    bottom: 0;
    right: 0;
    width: 10%;
    display: flex;
    overflow: auto;
    justify-content: center;
}
  
.send-btn:hover {
background-color: #ff9e3d;
color: white;
}

目前看起来是这样的：

此外，有什么办法可以消除消息字段右侧和底部周围的灰色边框？

html css button input chat
1个回答
0
投票

更改您的 CSS：

.msg-inputs{
   position: fixed;
   bottom: 0;
   display: flex;
   width: 100%;
}
        
.msg-inputs .msg-input[type=text] {
  width: 80%;
  overflow: hidden;
  background-color: #181818;
  color: #ff9e3d;
  border: 2px solid black; /* or make 'none' */
}

.msg-inputs .send-btn{
    background-color: #181818; 
    color: #ff9e3d;
    border: 2px solid #ff9e3d;
    margin-left: 2px;
    width: 10%;
    overflow: hidden;
    justify-content: center;
}
  
.send-btn:hover {
  background-color: #ff9e3d;
  color: white;
  cursor: pointer;
}
<!DOCTYPE HTML>
<html>
  <body>
    <div class="msg-inputs">
      <input class="msg-input" type="text" rows="3" placeholder="Message" name="message" id="message" onkeydown="handleKeyDown(event)" />
      <button class="send-btn" type="button" name="send" id="send-btn" onclick="sendMessage()">Send</button>
    </div>
  </body>
</html>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.