flex布局，左侧文字，右边按钮，确保右侧的多按钮文字不换行，左侧如果文字超出就出现省略号。优先保证右边的文字不换行哇,确保右侧按钮始终在一行显示。按钮样式 电脑版发表于：2025/5/29 16:49 #### view，html结构 ``` <div class="lp-ca-item"> <div class="lp-ca-title">2、上传教学内容文档，AI智能提取知识大纲</div> <div class="lp-ca-operate"> <div class="green-but">预览</div> <div class="blue-but">数字人预览</div> <div class="red-but">移除</div> </div> </div> ``` #### 样式 ``` .lp-ca-item { display: flex; align-items: center; margin-top: 10px; justify-content: space-between; } .lp-ca-title { margin-right: 6px; // 文字超出出现省略号 overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .lp-ca-operate { display: flex; flex-shrink: 0; /* 防止按钮组收缩 */ white-space: nowrap; /* 防止按钮换行 */ } ``` **核心样式其实就是右边那块的这两句：** ``` flex-shrink: 0; /* 防止按钮组收缩 */ white-space: nowrap; /* 防止按钮换行 */ ``` ### 按钮样式也贴一下吧 ``` .green-but { background: #e7f9fd; border-radius: 4px 4px 4px 4px; border: 1px solid #afe5f1; padding: 4px 7px; cursor: pointer; margin-left: 5px; margin-right: 5px; font-family: PingFang SC, PingFang SC; font-weight: 400; font-size: 12px; color: #15c0e6; } .blue-but { background: #ecf5ff; border-radius: 4px 4px 4px 4px; border: 1px solid #b3d8ff; padding: 4px 7px; cursor: pointer; margin-left: 5px; margin-right: 5px; font-family: PingFang SC, PingFang SC; font-weight: 400; font-size: 12px; color: #409eff; } .red-but { background: #ffecec; border-radius: 4px 4px 4px 4px; border: 1px solid #ebb4b4; padding: 4px 7px; cursor: pointer; margin-left: 5px; // margin-right: 5px; font-family: PingFang SC, PingFang SC; font-weight: 400; font-size: 12px; color: #f56c6c; } ```
