Chatbox开发：实现聊天气泡与时间对齐及气泡宽度动态适配

安全阿岳

2026-10-13

问题解决方法

你遇到的两个问题可通过修改以下CSS代码实现：

1. 核心修改逻辑

把消息右侧容器.right改为由内容决定宽度，而非默认占满可用空间，同时内部采用弹性垂直布局
聊天气泡采用fit-content实现宽度随内容动态调整，最大宽度不超过容器限制
用户名时间栏宽度和下方气泡宽度保持一致，实现时间与气泡边缘对齐

2. 完整修改后的CSS代码（仅改动部分，其余代码保持不变）

/* 原样式基础上新增修改 */
.chatbox .list .message .right {
    margin-left: 7px;
    max-width: 60%;
    /* 新增代码 */
    display: flex;
    flex-direction: column;
    width: fit-content;
}

.chatbox .list .message .right .text {
    font-size: 0.8em;
    border-radius: 10px;
    background-color: #989898;
    padding: 10px;
    min-height: 50px;
    /* 移除原display: inline-block，新增以下代码 */
    width: fit-content;
    max-width: 100%;
}

.chatbox .list .message .name-time {
    display: flex;
    justify-content: space-between;
    /* 新增代码 */
    width: 100%;
    margin-bottom: 4px;
}

.chatbox .list .message.self .right {
    margin-left: auto;
    /* 新增代码 */
    align-items: flex-end;
}