背景
在开发过程中,我们的样式是上下两行都是居中的,例如【1】;UI要求,上下两行居中,但是要左对齐,例如,下面的数字,要跟上面的第一个字对齐。
解决办法
我只是突然想到了一个 fit-content的css属性,但是了解地还不是很透彻,等以后了解透彻了再来补充。
思路如下:
在两行文字外包一层div,设置文字或者数字较大的一方为最大宽度,设置居中,文字左对齐。
css如下:
max-width:fit-content;
margin: 0 auto;
text-align:left;
即可实现,注意事项:
fit-content兼容性不好,要做好浏览器兼容.
2020-12-21
后续:果然是出现兼容性问题啦,edge和ie根本无法兼容,然后我略微一思索,觉得自己彷佛一个弱智。
简单的办法为啥不用
display: inline-block;
text-align: left;
inline-block就是会把整个的宽度变成最长的宽度,直接设置就行了,我为什么要绕远路。。。。