label标签嵌套使用导致格式不整齐的问题
今天开发对话框时遇到了文字需要动态判断是否展示的问题,采用在对话框中包裹了不同的div进行实现
<div v-if="totalBalance != 0"> <label>代金券 <label>{{totalBalance}}</label> 元( <label v-if="ECardBalance != 0">E卡 <label{{ECardBalance}}</label> 元</label> <label v-if="GiveCardBalance != 0 && ECardBalance != 0"> + </label> <label v-if="GiveCardBalance != 0">赠券 <label>{{GiveCardBalance}}</label> 元</label> )</label> </div>
下面为显示效果:
可以发现label包裹的标签产生了上下偏移效果。对比浏览器样式表,发现vertical-align属性与label标签本身的margin-bottom冲突导致的,将label标签声明class添加以下style解决问题:
vertical-align: baseline ;
2022.3.2更新:去除了所有不需要动态判断显示的label标签,设置style样式baseline
其他:
label标签设置text-align:center无作用:
label标签是行内元素,而text-align:center这个只针对于块状元素,label的宽度一般等于内部字符的宽度,所以单纯设置text-align:center是没用的
1,给label的父级标签设置 text-align:center;
2,给label标签设置 margin-left:auto;margin-right:auto;
3,给label设置一个宽度,使之宽度大于内部内容的长度,然后使用text-align:center居中对齐或 text-align:justify两端对齐
标签:
CSS
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· DeepSeek “源神”启动!「GitHub 热点速览」
· 我与微信审核的“相爱相杀”看个人小程序副业
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库
· 上周热点回顾(2.17-2.23)