Html 如何在聊天中将用户名与气泡外部对齐？
我需要把用户名放在消息框的顶部，就像它在Messenger上一样，但我不明白，我已经尝试使用position多次，但我不能，有人能帮我吗？ 我没有CSS的知识，所以这对我来说非常困难 如果我在消息框上方添加了名称，那么如果用户发送了多条消息，我应该怎么做才能不多次显示名称？我应该在css中使用任何显示吗 这就是我想要的：Html 如何在聊天中将用户名与气泡外部对齐？,html,css,Html,Css,我需要把用户名放在消息框的顶部，就像它在Messenger上一样，但我不明白，我已经尝试使用position多次，但我不能，有人能帮我吗？ 我没有CSS的知识，所以这对我来说非常困难 如果我在消息框上方添加了名称，那么如果用户发送了多条消息，我应该怎么做才能不多次显示名称？我应该在css中使用任何显示吗 这就是我想要的： .me{ 浮动：左； 明确：两者皆有； 颜色：黑色； 背景颜色：黄色； 保证金：2倍； 边界半径：30px； 填充：10px； 显示：内联块； } .用户{ 字体大小：0.
.me{
浮动：左；
明确：两者皆有；
颜色：黑色；
背景颜色：黄色；
保证金：2倍；
边界半径：30px；
填充：10px；
显示：内联块；
}
.用户{
字体大小：0.6rem；
}
文件
安妮
这是一条隐藏的信息
安妮
请告诉我怎么做
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="messagecontainer">
John Doe<br>
<div class="me">
<span>This is a hidden message</span>
</div>
</div><br><br><br>
<div class="messagecontainer">
Jane Doe<br>
<div class="me">
<span>Please tell me how to make it</span>
</div>
</div><br><br><br>
</body>
</html>
文件
无名氏
这是一条隐藏的信息
无名氏
请告诉我怎么做
Aniox
好啊
.me{
浮动：左；
明确：两者皆有；
颜色：黑色；
保证金：2倍；
填充：10px；
}
p、 msgs{
边缘顶部：5px；
页边距底部：0；
填充：1rem2rem；
边界半径：30px；
边框：1px实心#000；
背景颜色：黄色；
}
p、 名字{
边缘底部：5px；
左边距：10px；
}
.发送器img盒{
边界半径：50%；
宽度：30px；
高度：30px；
页边顶部：自动；
溢出：隐藏；
边缘底部：5px；
}
img.sender-img{
宽度：30px；
高度：30px；
显示器：flex；
垂直对齐：底部对齐；
}
div.sender-text{
左边距：10px；
}
.味精盒{
显示器：flex；
弯曲方向：行；
}
亚历克斯
这是一条隐藏的消息
大卫
这是我的第一条信息
这是我的第二条信息
亚历克斯
这是一条隐藏的消息
@AnneRebb因为它的高度。唯一的方法是使用
填充