css之基础-文本两端对齐

在最近工作中遇到一个问题,遇到三行不一样长的block文本,想要使他变成三行一样长两端对齐的布局,效果如图

css之基础-文本两端对齐_第1张图片

然后我自己感觉很简单代码直接上

css之基础-文本两端对齐_第2张图片

但是发现效果是


css之基础-文本两端对齐_第3张图片

完全不是自己想要的。

后来查资料发现还需要在文本的后面加上一个span,span的css为span{display:inline-block;width:100%;}

代码如图


css之基础-文本两端对齐_第4张图片

效果如图


css之基础-文本两端对齐_第5张图片

代码很简单,效果就不一样了。

第一次写博客,不知道怎么写,说的不对的地方欢迎指导,谢谢!

你可能感兴趣的:(css之基础-文本两端对齐)