最近在写前端页面时发现这样一个问题 : 用标签包裹的字符会在生成HTML页面以后自动在字符前后加上空格,例如:
<div class="content apply" v-show="detailInfo.type=='3'">
<span v-if="detailInfo.intStatus==3||detailInfo.intStatus==4">
已报名人数:
<span style="color:#AF7C58 !important;">{{signUpUser.length}} </span>人
</p>
<span v-else style="color:#ADADAD;">活动未开始!</span>
<div class="applyLine" style="margin-top:10px;" v-show="detailInfo.intStatus==3||detailInfo.intStatus==4">
<template v-if="(signUpUser||[]).length>0">
<p :key="index" v-for="(item,index) in signUpUser ">
<span style="width:96px !important;padding-right:82px;">姓名:{{item.userList[0].realName||'- -'}}</span>
<span style="width125px !important;padding-right:73px;">手机号:{{item.userList[0].callPhone||'- -'}}</span>
<span style="width:170px !important;">报名时间:{{item.userList[0].createTime||'- -'}}</span>
</p>
</template>
</div>
到页面上的效果如下:
通过截图,我们可以看到在文字之前自动生成了空格,导致 " 已报名人数 " 与第二行 " 姓名 " 无法左对齐,
我的解决办法是在文字前添加 <a>
标签,简单粗暴
<a>已报名人数:</a>
<a style="color:#AF7C58 !important;">{{signUpUser.length}}</a>人
此时页面效果
空格消失