css实现文字两端对齐

明月
• 阅读 956
<div class="box">这是摘哦给你发觉得斯蒂芬</div>
<br />
<div class="box">
  这是摘哦给你发觉得斯蒂芬
  <span></span>
</div>

在块级元素box上面,加上 text-align: justify;,在span元素上加上样式

display: inline-block;
padding-left: 100%;

效果图 css实现文字两端对齐

点赞
收藏
评论区
推荐文章
小嫌 小嫌
2年前
css中块状元素和内联元素
CSS中,html中的标签元素大体被分为三种不同的类型:块状元素、内联元素(又叫行内元素)和内联块状元素。块状元素块状元素特点1、每个块级元素都从新的一行开始,并且其后的元素也另起一行。2、元素的高度、宽度、行高以及顶和底边距都可设置。3、元素宽度在不设置的情况下,是它本身父容器的100%(和父元素的宽度一致),除非设定一个宽度。常用的块状元素有:、
good123 good123
2年前
浅谈BFC格局~
1.BFC含义💳BFC全称:BlockFormattingContexts块级元素格式化上下文W3CCSS2.1规范中的一个概念,它是一个独立容器,决定了块级元素如何对它的内容进行布局,以及与其他元素的关系和相互关系一个页面是由很多个Box组成的,元素的类型和display属性,决定了这个Box的类型,不同类型的Box,会参与不
菜园前端 菜园前端
1年前
考考你HTML常用的标签有哪些?
原文链接:基础标签div块元素介绍:没有任何含义,主要用于div进行模块布局类型:块级元素block,盒子占用宽度为一整行属性:没有属性language我是模块span行内文本元素介绍:没有任何含义,主要用于展示文本内容类型:内联元素inline,盒子占用
Stella981 Stella981
2年前
Less 嵌套
本节我们学习Less中的嵌套,嵌套应该很容易理解,HTML语言中就支持标签的嵌套。我们在使用CSS时,如果想要为多层嵌套的元素设置样式,要么给元素加上一个类选择器或ID选择器,要么使用后代选择器。例如:.xkd{fontsize:14px;}.xkdp{lineheight:25
Wesley13 Wesley13
2年前
CSS块级元素与行内元素
CSS块级元素与行内元素行内元素与块状元素1、块级元素:可以设置width,height属性。行内元素:设置width和height无效,其宽度随其元素的内容(文字或者图片等)的宽度而变化。可以通过lineheight设置行高(行高和height是不同的东西)。2、块级元素:可以设置margin和padd
Stella981 Stella981
2年前
CSS 布局 ,文档流,定位,中划线,表格属性,line
CSS知识汇总verticalalign:top|middle|bottom//用于图片时,(如文字)其他元素相对于图片的上,中,下对齐divlineheight:200px;//设置lineheight的高度和div的高度一样,则div里的文字10Px上下居中对齐divheight:200px;divfontsiz
Wesley13 Wesley13
2年前
JS和CSS加载(渲染)机制不同
一、结论CSS可以在页面加载完成后随时渲染。举个例子:通过js给某个元素加一个id或者css,只要这个id或者css有对应的样式,此元素的样式就会自动生效。JS不可以在页面加载完成后生效。最明显的例子就是使用EasyUI的时候,iframe中哪些样式无效(EasyUi是依靠JS进行样式处理的,所以无法运行JS,那么样式也就无法设置。简单点说
Wesley13 Wesley13
2年前
CSS实现居中的方式
在介绍居中方式之前,简单介绍一下行内元素和块级元素。行内元素和其他元素都在同一行高,行高及外边距和内边距部分可以改变宽度只与内容有关行内元素只能容纳文本或者其他行内元素常用内联元素:a,img,input,lable,select,span,text
Wesley13 Wesley13
2年前
CSS中清除浮动的作用以及如何清除浮动
1.什么是浮动,浮动的作用“浮动”从字面上来理解就是“悬浮移动、非固定”的意思。块级元素(div、table、span…)是以垂直方向排列,而在前端界面中往往要使用水平布局块级元素使界面更美观。这就要用到浮动了。被设置浮动的元素会脱离标准流(竖直排列),从而达到水平排列的效果。例如.未设置浮动时图1中的两张图片竖直排列在父级元素(橙色区域)
Stella981 Stella981
2年前
CSS实现文字两端对齐
最近的项目遇到了这样的需求:(要求标题部分不管文字多少,都必须两端对齐)如下图:!(https://oscimg.oschina.net/oscnet/6e151291c0c55e2a231d00ec198d6c5be11.png)当时也没有多想直接使用‘&ensp;’进行代替,毕竟产品同学想快一点看到效果,不敢怠慢!不过到第二个页面就傻眼了