多行文字字数不一致的两端对齐
需求
CSS 两行代码轻松实现 多行文字字数不一致的两端对齐问题
<style lang="stylus" scoped>
...
.p-con-body
display flex
flex-direction row
font-size .4rem
ul
flex 1
display flex
flex-direction column
justify-content space-between
li
flex 1
line-height 1rem
text-align center
border 1px solid #eeeeee
&:first-child
background-color #cfbb80
color #ffffff
font-weight 600
li
color #ffffff
border-bottom 1px solid #ffffff
text-align-last justify
padding 0 3.4rem
...
</style>
关键是这两句
text-align-last justify
padding 0 3.4rem
使用text的text-align-last 为justify 属性，便可实现把每行li内的文字两端对齐，再设置下li的padding内边距即可。 样式效果：
补充知识点
CSS3—first-child或者nth-child(1) 不起作用的原因
e.g.原HTML的结构大致是
<div>
<svg>
<p>
<p>
</div>
在对P标签使用CSS的first-child和nth-child(1)属性定义时，发现总是不起作用，百度了下才发现，原来自己以前的理解有误: first-child和nth-child(1)并不是从定义的标签内部开始计算位置，如P。 而是从所定义标签的父元素开始计算，如上面👆的div。 所以要定义第一个P标签的属性，就应是nth-child(2)
