一. 代码展示
<ul>
<li class="phone">{{ XXX.mobile }}</li>
<li class="line"></li>
<li class="vchat">微信号 {{ XXX.wechat }}</li>
</ul>
.phone {
float: left;
margin-top: 20px;
font-size: 28px;
color: #fff;
font-weight: 500;
max-width: 40%;
}
.vchat {
float: left;
margin-top: 20px;
font-size: 28px;
color: #fff;
font-weight: 500;
max-width: calc(60% - 60px);
}
二. 代码效果展示
如果我们不设置宽度(max-width),当手机号或者微信号过长时会将一个<li>
标签挤到下一行。
三. calc作用
calc(60% - 60px);
作用就是只占用<ul>
标签的60%,这个是不管手机屏多大都可以占到这个比例,减去- 60px
作用就是固定这么多长度,空余出来,这个长度是固定的,不能随着屏幕去变更。