tnblog
首页
视频
资源
登录

flex布局,左侧文字,右边按钮,确保右侧的多按钮文字不换行,左侧如果文字超出就出现省略号。优先保证右边的文字不换行哇,确保右侧按钮始终在一行显示。按钮样式

249人阅读 2025/5/29 16:49 总访问:931834 评论:0 收藏:0 手机
分类: 前端

view,html结构

  1. <div class="lp-ca-item">
  2. <div class="lp-ca-title">2、上传教学内容文档,AI智能提取知识大纲</div>
  3. <div class="lp-ca-operate">
  4. <div class="green-but">预览</div>
  5. <div class="blue-but">数字人预览</div>
  6. <div class="red-but">移除</div>
  7. </div>
  8. </div>

样式

  1. .lp-ca-item {
  2. display: flex;
  3. align-items: center;
  4. margin-top: 10px;
  5. justify-content: space-between;
  6. }
  7. .lp-ca-title {
  8. margin-right: 6px;
  9. // 文字超出出现省略号
  10. overflow: hidden;
  11. text-overflow: ellipsis;
  12. white-space: nowrap;
  13. }
  14. .lp-ca-operate {
  15. display: flex;
  16. flex-shrink: 0; /* 防止按钮组收缩 */
  17. white-space: nowrap; /* 防止按钮换行 */
  18. }

核心样式其实就是右边那块的这两句:

  1. flex-shrink: 0; /* 防止按钮组收缩 */
  2. white-space: nowrap; /* 防止按钮换行 */

按钮样式也贴一下吧

  1. .green-but {
  2. background: #e7f9fd;
  3. border-radius: 4px 4px 4px 4px;
  4. border: 1px solid #afe5f1;
  5. padding: 4px 7px;
  6. cursor: pointer;
  7. margin-left: 5px;
  8. margin-right: 5px;
  9. font-family: PingFang SC, PingFang SC;
  10. font-weight: 400;
  11. font-size: 12px;
  12. color: #15c0e6;
  13. }
  14. .blue-but {
  15. background: #ecf5ff;
  16. border-radius: 4px 4px 4px 4px;
  17. border: 1px solid #b3d8ff;
  18. padding: 4px 7px;
  19. cursor: pointer;
  20. margin-left: 5px;
  21. margin-right: 5px;
  22. font-family: PingFang SC, PingFang SC;
  23. font-weight: 400;
  24. font-size: 12px;
  25. color: #409eff;
  26. }
  27. .red-but {
  28. background: #ffecec;
  29. border-radius: 4px 4px 4px 4px;
  30. border: 1px solid #ebb4b4;
  31. padding: 4px 7px;
  32. cursor: pointer;
  33. margin-left: 5px;
  34. // margin-right: 5px;
  35. font-family: PingFang SC, PingFang SC;
  36. font-weight: 400;
  37. font-size: 12px;
  38. color: #f56c6c;
  39. }

欢迎加群讨论技术,1群:677373950(满了,可以加,但通过不了),2群:656732739。有需要软件开发,或者学习软件技术的朋友可以和我联系~(Q:815170684)

评价

css弹性盒子flex布局

css弹性盒子由于版本不同浏览器问题造成了一些不同的写法display:flexbox;在google浏览器中如果使用下面的写法就不行displa...

flex布局常见问题

flex布局中内容div自适应高度&lt;divclass=&quot;content&quot;&gt; &lt;divclass=&quot;text-center&quot;style=&quot;...

flex好看的相册

先让大家看看效果图吧:需要引入外来插件:https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magni...

一点flex布局的运用

水平分割:html:&lt;divclass=&quot;flex-container&quot;&gt; &lt;divclass=&quot;flex-item&quot;&gt;flexitem1&lt;/div...

css div水平居 文字垂直居中 flex的方式实现div的垂直与水平居中布局模板

DIV等元素水平居中定宽度+margin:top auto可以让一个块级别元素在外层居中例如这样:效果:可以看到这个div已经居中了但是...

uni-app 基础viewflex布局使用

代码如下: &lt;template&gt; &lt;view &gt; &lt;view style=&quot;display: flex;flex-direction:row-reve...

flex布局多行自适应间隔

//父盒子,设置为: .templateItem { width: 100%; text-align: center; display: flex; align-content: fl...

css实现左边div固定宽度右边div自适应撑满剩下的宽度左边定宽左边固定右边自适应flex 占剩下的宽度

这是一道面试题,你有多少种办法呢?这里我们假设左边名为 left,宽度为 200 px,右边名为 right。即默认 .left { widt...

flex 每行3个flex一行显示3个flex 每行显示4个自适应排列flex每行固定几个布局css 格子栏效果css实现框框效果模板小屏下一行显示4个大屏下一行显示5个

[TOC]效果如下,每行显示3个自适应排列 其实也很简单,只需要设置父元素flex布局,然后设置一下换行排列,flex-wrap: wrap...

flex子元素靠右flex让某个子元素靠右或靠左显示

以下以块元素的Flex布局为示例:只需要两句代码,轻松搞定! 代码1:在父元素里面加入以下代码:(父盒子加了display: fle...

flex平分宽度flex宽度自适应均分宽度

html: &lt;div class=&quot;parent&quot;&gt; &lt;div class=&quot;item&quot;&gt; 测试1 &lt;/div&g...

vue布局模板前端布局模板flex布局应用

设计图效果: 代码: &lt;!-- 学习活跃度 --&gt; &lt;template&gt; &lt;div class=&quot;learnActivityContainer&q...

flex布局一行显示多个flex布局固定显示n个自适应布局

在前端开发的时候,对页面布局的时候,经常遇到固定的一行显示多个,这个经常遇到,所以我想做个记录,等到下次遇到的时候...

flex flex-gorw不等分的问题

flex flex-gorw不等分的问题今天在练习flex 栅格布局的时候, 明明设置了项目元素都是flex-gorw:1;但是发现有个地方 ,因为...

flex实现一行显示n个数量的布局不同屏幕宽度下显示不同的数量自适应一行显示的个数

[TOC]要实现的效果如下: 其实原理也非常简单,父元素主要是主要就是设置一个flex布局,然后flex-wrap设置为需要换行 .app...
这一生多幸运赶上过你.
排名
8
文章
252
粉丝
7
评论
7
ICP备案 :渝ICP备18016597号-1
网站信息:2018-2025TNBLOG.NET
技术交流:群号656732739
联系我们:contact@tnblog.net
公网安备:50010702506256
欢迎加群交流技术