我目前正在研究一个聊天界面，我正面临着显示聊天消息的问题。目前，聊天消息显示在单行中，如下图所示:
我的页面截图
但是，我希望每条消息显示在单独的一行中，如下图所示:
我想在我的页面布局的截图
我试过添加display: block到。chtmsg-content类并调整调整聊天消息的CSS属性但是它不起作用
我的页面使用的HTML代码:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Document</title>
<link rel="stylesheet" href="style.css"/>
</head>
<body>
<div class="chat-container">
<div class="chthdr">
<h3>Chatkura</h3>
</div>
<div class="chtbd">
<div class="chtmsg">
<div class="chtmsg-content">Hello! How can I help you today
</div>
<br/>
<div class="cht-tis">
<img class="usrpn" src="R.png" alt="user icon"> <div class="chtusr">
<span class="msgsp">hello</span>
</div>
<img class="usrpn" src="R.png" alt="user icon"> <div class="chtusr">
<span class="msgsp">hello</span>
</div>
</div>
<div class="cht-btreps">
<img src="bot.png" alt="bot icon"> <div class="chtmsg-reps">
<span class="msgsp">hi</span>
</div>
<img src="bot.png" alt="bot icon"> <div class="chtmsg-reps">
<span class="msgsp">hi</span>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
CSS
*{
margin: 0;
padding: 0;
}
body{
overflow-y: auto;
overflow-x: hidden;
}
.chat-container {
display: block;
overflow-y: auto;
overflow-x: hidden;
background-color: #1f7c22;
border-radius: 10px;
box-shadow: 20px 38px 40px rgba(0, 0, 0, 0.4);
width: 60%;
height:100%;
margin: 15px auto;
font-family: Arial, sans-serif;
}
.chthdr {
text-align: center;
background-color: #36bbb033;
border-radius: 8px 8px 0 0;
padding: 15px;
border-bottom: 2px solid #dddddd;
}
.chtbd {
display: flex;
flex-direction: column;
padding: 15px;
height: 30vh;
overflow-x: hidden;
overflow-y: auto;
}
.chtmsg{
margin-bottom: 10px;
}
.usrpn{
width: 27px;
border-radius: 14px;
border: 2px solid #ffffff;
}
img{
width: 30px;
margin-right: 5px;
height: fit-content;
}
.chturs{
display: flex;
justify-content: right;
margin-bottom: 10px;
}
.chtmsg-content {
margin-bottom: 10px;
background-color: #ffffff;
border-radius: 8px;
width: max-content;
padding: 11px;
box-shadow: 10px 4px 31px rgba(0, 0, 0, 0.4);
display: inline-block;
}
.cht-tis{
display: flex;
justify-content: right;
}
.msgsp{
font-size: 18px;
max-width: 50%;
word-wrap: break-word;
}
.chtusr{
background-color: #23a875;
border-radius: 10px;
padding: 15px;
box-shadow: 10px 0px 12px rgba(0, 0, 0, 0.4);
max-width: 70%;
margin-bottom: 17px;
align-self: flex-start;
}
.cht-btreps{
display: flex;
justify-content: left;
}
.chtmsg-reps{
overflow-y: hidden;
overflow-x: hidden;
background-color: #c2c2c2;
border-radius: 9px;
padding: 10px;
box-shadow: 10px 4px 30px rgba(0, 0, 0, 0.4);
display: inline-block;
max-width: 75%;
margin-bottom: 15px;
}
任何帮助都将非常感激。提前感谢!!和谢谢你的阅读
有些div缺少结束标记，有些div的结束标记超出了它们自己的作用域。
我已经重新安排了你的HTML，希望这是你想要的。
<div class="chat-container">
<div class="chthdr">
<h3>Chatkura</h3>
</div>
<div class="chtbd">
<div class="chtmsg">
<div class="chtmsg-content">Hello! How can I help you today
</div>
<div class="cht-tis">
<img class="usrpn" src="R.png" alt="user icon">
<div class="chtusr">
<span class="msgsp">hello</span>
</div>
</div>
<div class="cht-tis">
<img class="usrpn" src="R.png" alt="user icon">
<div class="chtusr">
<span class="msgsp">hello</span>
</div>
</div>
</div>
<div class="cht_bot_wraper">
<div class="cht-btreps">
<img src="bot.png" alt="bot icon">
<div class="chtmsg-reps">
<span class="msgsp">hi</span>
</div>
</div>
<div class="cht-btreps">
<img src="bot.png" alt="bot icon">
<div class="chtmsg-reps">
<span class="msgsp">hi</span>
</div>
</div>
</div>
</div>
</div>