如何通过CSS为聊天消息设置圆角样式？

解决方案 #

你需要调整CSS实现消息左右分对齐、气泡宽度自适应的效果，修改后的完整代码如下：

CSS代码

ul {
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

ul li {
  padding: 5px 10px;
  color: white;
  background: #444;
  min-height: 30px;
  line-height: 30px;
  list-style-type: none;
  width: fit-content;
  max-width: 70%;
  align-self: flex-start;
  border-radius: 4px;
}

ul li.out {
  background: cornflowerblue;
  align-self: flex-end;
}

HTML代码无需调整，保持原有结构即可：

<ul>
  <li class="out">1</li>
  <li>2</li>
  <li>3</li>
  <li class="out">4</li>
  <li class="out">5</li>
  <li>6</li>
  <li class="out">7</li>
  <li>8</li>
  <li>9</li>
  <li>10</li>
  <li class="out">11</li>
</ul>

核心调整逻辑：

• 移除li默认块级属性占满整行的问题，用width: fit-content让气泡宽度随内容自动适配
• 新增max-width限制消息气泡最大宽度，避免单行内容过长影响阅读
• 通过flex子元素的align-self属性控制对齐方向：接收消息默认靠左，带out类的发送消息靠右
• 将固定高度改为最小高度搭配行高，适配多行消息的展示需求
• 可选增加圆角属性，更贴合常见聊天气泡的视觉风格

内容的提问来源于stack exchange，提问作者Uğur Özgen