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

vkc1a9a2 于 2023-03-20 发布在其他

关注(0)|答案(1)|浏览(103)

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

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

目前它看起来像这样：

还有，有没有办法去掉消息字段右下角的灰色边框？

css

来源：https://stackoverflow.com/questions/75779059/how-to-make-send-button-stick-to-message-input-field-at-bottom-of-screen

1条答案

按热度按时间

4xrmg8kj1#

更改您的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>

赞(0）回复(0）举报 2023-03-20

我来回答

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

1条答案

相关问题

热门标签

最新问答