如何在不使用text-align:right、flex的情况下将<p>标签对齐到div右侧？

你的.msg-first类已经设置了width: fit-content，只需给该类添加margin-left: auto，就能实现<p>标签右对齐且保持垂直排列，完全匹配你的需求：

修改后的CSS代码 #

.msg-first {
  width: fit-content;
  border-radius: 1em;
  background-color: #103a96;
  padding-left: 1em;
  padding-right: 1em;
  padding-top: .4em;
  padding-bottom: .4em;
  margin-right: .5em;
  margin-top: -2%;
  margin-left: auto; /* 新增该行实现右对齐 */
}

/* 可选优化：调整气泡间距，避免重叠 */
.msg-first + .msg-first {
  margin-top: 0.5em;
}

原理说明 #

margin-left: auto会让元素自动占据父容器左侧的剩余空间，从而将元素推至右侧。这是不依赖flex、text-align的前提下，实现块级元素右对齐的标准方法，且完全保留你原有的<p>标签结构。

额外建议 #

原代码中的margin-top: -2%容易导致气泡重叠，建议换成固定间距值（如0.5em），或用相邻兄弟选择器控制后续气泡的上下间距，让短信排版更自然。

内容的提问来源于stack exchange，提问作者DapperSFM