label标签嵌套使用导致格式不整齐的问题

2022-02-24 14:01:23 阅读：186 来源： 互联网

今天开发对话框时遇到了文字需要动态判断是否展示的问题，采用在对话框中包裹了不同的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 ;

后续会看看有没有其他办法优化label嵌套问题或解决css样式问题。

标签：vertical,对话框,标签,align,label,嵌套
来源： https://www.cnblogs.com/DL6526/p/15931434.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

label标签嵌套使用导致格式不整齐的问题