美文网首页
css之基础-文本两端对齐

css之基础-文本两端对齐

作者: 羊太郎_胡一 | 来源:发表于2017-04-27 10:33 被阅读0次

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

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

但是发现效果是

完全不是自己想要的。

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

代码如图

效果如图

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

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

相关文章

  • css之基础-文本两端对齐

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

  • CSS之文本两端对齐

    说起text-align,大家一定都不觉得陌生,我们常用关键字left、right、center实现行内元素相对父...

  • CSS 常用效果整理

    整理场景的css 灵活运用CSS开发技巧 1、使用 text-align-last 对齐两端文本代码 ...

  • 前端笔记

    1. Css 1).使用 text-align-last 对齐两端文本 text-align-last: jus...

  • css文本两端对齐

    在做表单时我们经常遇到让上下两个字段对齐的情况,比如姓名, 手机号码, 出生地。这样我们就要用到 text-ali...

  • CSS文本两端对齐

    在实际工作中,有的时候需要实现两行字数不同的文字实现左右对齐,比如姓名和联系方式。下面我们就来演示一下如何实现这种...

  • CSS实现文本两端对齐

    CSS实现文本两端对齐 我们在制作表单时经常遇到控件前的label标签中文本长度不一,有时候为了美观,我们会采取文...

  • Flex 布局介绍

    HTML 多个元素在一行 CSS 多个元素水平居中对齐 多个元素水平两端对齐 多行多个元素水平两端对齐 多个元素在...

  • 前端Day5

    CSS基础与进阶 1.什么是CSS? CSS是层叠样式表,主要用于设置HTML文本内容(字体,大小,对齐方式等)...

  • 04-CSS总结-持续更新中

    常用CSS 清除浮动 文字两端对齐 CSS属性兼容写法 transform box-sizing

网友评论

      本文标题:css之基础-文本两端对齐

      本文链接:https://www.haomeiwen.com/subject/vwsgzttx.html