本文介绍使用 flexbox 布局解决按钮中长文本与右侧图标布局冲突的问题：确保文字在空间不足时自然换行，同时保持图标始终右对齐、垂直居中且不被文本推挤。
在传统 float: right 布局中，.icon 会脱离文档流，导致父容器（<button>）无法正确计算其内部尺寸，从而引发文本“绕行失败”——长文本不仅不会换行，反而将图标挤出可视区域或破坏行高对齐。根本原因在于 float 与 inline 元素混合时缺乏可靠的尺寸控制和对齐机制。
✅ 推荐方案：Flexbox 布局（现代、可靠、语义清晰）
将 .collapsible 按钮设为 display: flex，并合理配置主轴与交叉轴行为：
.collapsible {
display: flex;
align-items: center; /* 垂直居中图标与文本行 */
gap: 5px; /* 图标与文字间留白，替代手动 margin/padding */
padding-left: 17px;
padding-top: 10px;
padding-bottom: 10px;
width: 100%;
background-color: white;
color: #021032;
border: solid 1px #D1D3D4;
border-radius: 6px;
outline: none;
font-size: 17px;
margin: 5px 0;
box-shadow: 0px 0px 10px 10px rgba(0, 0, 0, 0.005);
text-align: left; /* 此处仅影响纯文本对齐，flex 下实际由容器控制 */
}图标元素需明确脱离“弹性伸缩”行为，避免被压缩或拉伸：
.icon {
background-image: url("https://cdn.onlinewebfonts.com/svg/img_231938.png");
background-repeat: no-repeat;
background-size: 25px;
height: 25px;
width: 25px;
transition: transform .25s ease-in-out; /* 注意：原代码中 'rotate' 非合法 CSS 属性，应为 'transform' */
flex: 0 0 auto; /* 关键！禁止缩放/增长，固定尺寸 */
}? HTML 结构注意事项
- 确保 <div class="icon"> 是 <button> 的直接子元素（当前示例中已满足）；
- 移除 <div class="icon"><div> 中多余的闭合标签错误（原文末尾多了一个 <div>，应为 </div>）；
- 推荐使用 <span> 替代 <div> 作为内联图标容器，语义更准确（但 <div> 在 button 内亦可接受）。
? 额外优化建议
- 若需图标随按钮展开/收起旋转（如折叠箭头），可添加状态类控制：
.collapsible.active .icon { transform: rotate(180deg); } - 对超长文本进一步增强可读性，可添加 word-break: break-word 或 hyphens: auto 到 .collapsible；
- 避免在按钮内使用块级元素（如 <div>）嵌套复杂结构——保持语义简洁，利于无障碍访问（a11y）。
总结：用 display: flex + align-items: center + flex: 0 0 auto 替代 float: right，是解决“文本换行 vs 图标定位”冲突的最简、最健壮方案。它无需 JavaScript 计算宽度，不依赖 white-space 强制干预，且天然支持响应式与状态动画。
