css text-align-last设置末尾文本对齐方式

text-align-last:auto | start | end | left | right | center | justify

auto:
无特殊对齐方式。

left:
内容左对齐。

center:
内容居中对齐。

right:
内容右对齐。

justify:
内容两端对齐。

start:
内容对齐开始边界。

end:
内容对齐结束边界。

说明:用来设置一个块中的最后一行的对齐方式。只能运用于块元素上,或者说块元素的断行内。

这里着重讲解一下"justify",一般我们在写表单啥的情况下都会用到它。

默认情况下是这样的

857662-20160925125526794-522790081.png

用了"justify"以后

857662-20160925125740569-293118881.png

<style>body,ul,li,label,input{margin:0;padding:0;}ul{list-style:none;}label{width:100px;display:inline-block;text-align-last:justify;}
</style>
<ul><li><label for="#user">网名:</label><input type="text"></li><li><label for="#user">个性签名:</label><input type="underwrite"></li>
</ul>

如果想让文字对齐可以把:去掉。

其实我们还可以这个样子。

<style>body,ul,li,label,input{margin:0;padding:0;}ul{list-style:none;}li{overflow:hidden;}label{width:100px;white-space:pre;}label,input{float:left;}
</style>
<ul><li><label for="#user">网    名:</label><input type="text"></li><li><label for="#user">个性签名:</label><input type="underwrite"></li>
</ul>

857662-20160925130510820-24584426.png

原理就是用white-space保留空格。缺点就是你的自己调整空格哈,不过比起用&nbsp;好多了。

"justify"还有一种地方也会用到,就像这个。

857662-20160925132048995-259266764.png

看起来右边特别丑,我们可以用text-align:justify

<style>body,div{margin:0;padding:0;}div{width:300px;text-align:justify;text-indent:2em;}
</style>
<div>让我们一起共勉,互相支持,让我们跑得更快,跑得更好吧!哪怕路上有风雨,哪怕途中有坎坷,只要不放弃奔跑,不放弃对自我的修行,我们终究会创造属于自己的生命奇迹!</div>

857662-20160925132223814-1035597820.png

要说text-aligntext-align-last的区别可能就是text-align-last只包含最后一行。

有时候我们还真的想让最后一行文本居中。

857662-20160925132549938-1624225318.png

这种情况我想也是会有的吧,代码如下:

<style>body,div{margin:0;padding:0;}div{width:300px;text-align:justify;text-align-last:center;}
</style>
<div>让我们一起共勉,互相支持,让我们跑得更快,跑得更好吧
!哪怕路上有风雨,哪怕途中有坎坷,只要不放弃奔跑,不放弃对
自我的修行,我们终究会创造属于自己的生命奇迹!</div>

注意:如果text-alignlast-align-last同时设置,那么会忽然text-align对最后一行的设置。

转载于:https://www.cnblogs.com/pssp/p/5905747.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/395015.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

后端开发除了编码还要做什么_每个开发人员都应掌握的基本技能(除了编码)

后端开发除了编码还要做什么Whether you are learning to code, looking for a new job, or just want to improve your skills as a developer, you need to master the essential tools of team collaboration. These are as important as knowing how to code.无论您是学习编…

Python中的defaultdict方法

字典&#xff08;dictionary&#xff09;是Python中一种常用的数据类型。不同于其他由数字索引的序列&#xff0c;字典是用"键"&#xff08;key&#xff09;来索引的。通常表示为dict(key: val, ...)&#xff0c;有以下特征&#xff1a; 键可以是任何不可变&#xff…

git撤销commit 并保存之前的修改

撤销并保留修改 参数 –soft # 先进行commit &#xff0c;之后后悔啦$ git commit -am "对首篇报告研究员字段改为author_name"执行git log $ git logcommit 3d6788f577faba5e1d408e372031c81beee79749Author: yous <yous.com>Date: Thu Dec 14 10:08:36 2017 …

php替换中文,PHP中文替换

//定义编码header( Content-Type:text/html;charsetutf-8 );$wordsarray(我,你,他);$content"测一测我是不是违禁词";$bannedgenerateRegularExpression($words);//检查违禁词$res_bannedcheck_words($banned,$content);write_html($content,$res_banned);/*** descr…

secoclient隧道保活超时或协商超时_推荐:承德市隧道led大屏厂家电话【联丰智慧科技】...

通过为大型隧道施工建设搭建全覆盖式的定位&#xff0c;可以有效施工的效率、项目现场的保障能力。安装隧道门禁能解决哪些问题&#xff1f;近年来&#xff0c;我国交通建设正处于高速发展的阶段&#xff0c;在交通建设中&#xff0c;工程安防工作也越发受到&#xff0c;越来越…

JavaScript Essentials:如何为循环而烦恼

by Zell Liew由Zell Liew JavaScript Essentials&#xff1a;如何为循环而烦恼 (JavaScript Essentials: how to wrap your head around for loops) Let’s say you want to run a function, bounceBall, four times. How would you do it? Like this?假设您要运行一次功能b…

python中的类的成员变量以及property函数

1 python类的各种变量 1.1 全局变量 在类外定义的变量。 1.2 类变量 定义在类里面&#xff0c;所有的函数外面的变量。这个变量只有一份&#xff0c;是所有的对象共有的。在类外用“类.”来引用。 1.3 实例变量 用self.xxx在类的任何函数中定义的变量就是实例变量。在类内用“s…

C++常用的系统函数

数学<math.h>&#xff1a; 1 三角函数 double sin (double); double cos (double); double tan (double); 2 反三角函数 double asin (double); 结果介于[-PI/2, PI/2] double acos (double); 结果介于[0, PI] double atan (double); 反正切(主值), 结果介于[-PI/2, PI/2…

网页特效java代码,美化网页常用特效代码

1&#xff0e;让文字不停地滚动&#xff1c;MARQUEE&#xff1e;滚动文字&#xff1c;/MARQUEE&#xff1e;2&#xff0e;记录并显示网页的最后修改时间&#xff1c;script languageJavaScript&#xff1e;document.write("最后更新时间: " document.lastModified …

作业,两次实验

实验一&#xff1a; 1 编程打印5行的倒三角形&#xff0c;第一行打印9个*&#xff0c;第二行7个*&#xff0c;……第5行打印1个* #include<stdio.h>int main(){printf("*********\n *******\n *****\n ***\n *\n");return 0;} 总结 注意换行以及位置的…

javaweb和ajax使用查询出来的数据做下拉菜单_区块链浏览器实用指南篇:利用链上数据把握减半行情...

进入2020年&#xff0c;加密货币市场最热的话题当属“减半”了。在减半行情的推动下&#xff0c;以BTC为首的减半币种展现出了极强的上行趋势。如何抓住这一波行情&#xff0c;评估正确时机&#xff1f;当然&#xff0c;这个问题的答案可以说是争议纷纷&#xff0c;但有一个参考…

纯函数式编程语言_纯功能编程语言如何改变您的生活。

纯函数式编程语言by Andrea Zanin由Andrea Zanin 纯功能编程语言如何改变您的生活。 (How a purely functional programming language can change your life.) I believe everyone should learn Haskell, even if you won’t use it in your work. It’s beautiful, and it ch…

Win10 教育版

Windows 10 版本 1607 引入了专为 K-12 机构的特有需求而设计的两个版本&#xff1a;Windows 10 专业教育版和 Windows 10 教育版。 这些版本为不断发展的 K-12 教育 IT 环境提供特定于教育的默认设置。Windows 10 专业教育版Windows 10 专业教育版基于 Windows 10 专业版的商业…

java中的排序方法,Java中的排序比较方式:自然排序和比较器排序

这里所说到的Java中的排序并不是指插入排序、希尔排序、归并排序等具体的排序算法。而是指执行这些排序算法时&#xff0c;比较两个对象“大小”的比较操作。我们很容易理解整型的 i>j 这样的比较方式&#xff0c;但当我们对多个对象进行排序时&#xff0c;如何比较两个对象…

ImageView缩放选项

ImageView.ScaleType 将图片边界缩放到所在view边界时的缩放选项。 Options for scaling the bounds of an image to the bounds of this view. 不同选项含义 CENTER 居中&#xff0c;不缩放。 Center the image in the view, but perform no scaling. CENTER_CROP 居中&#x…

css命名_CSS命名约定将节省您的调试时间

css命名I have heard lots of developers say they hate CSS. In my experience, this comes as a result of not taking the time to learn CSS.我听到很多开发人员说他们讨厌CSS。 以我的经验&#xff0c;这是因为没有花时间学习CSS。 Korean ??韩文?? 알림: 한국인 독…

电脑删除快捷键_可能是知乎最有用的 Windows 快捷键学习指南。

在任何地方搜索“快捷键的使用”&#xff0c;你都能找到无数的列表清单。但你应该不会专门去对照一个个的表单&#xff0c;企图把所有快捷键全部掌握吧&#xff1f;经过三年左右的总结和视频制作&#xff0c;Topbook 大概产出了 20 支左右的快捷键、快捷操作及应用等相关的视频…

java自动依照日期建表,脚本根据一个表中的日期字段填充每月汇总表

你想在这里做两件事 . 我假设您正在使用Oracle(因为您正在使用Java) .首先&#xff0c;您希望对每个用户的每日交易进行分组 .创建一个名为 tempTable 的临时表 .使用 to_char(currentdate, yyyy/mm/dd) 对它们进行分组 .INSERT INTO tempTableSELECTuserid,resourceid,doc_nam…

算法专题 普及组【2008】三3 C++版

转载于:https://www.cnblogs.com/qilinart/articles/5914850.html

linux用户修改用户shell

要拒绝系统用户登录,可以将其shell设置为/usr/sbin/nologin或者/bin/false # usermod -s /usr/sbin/nologin username 或者 # usermod -s /bin/false username /bin/false/bin/false什么也不做只是返回一个错误状态,然后立即退出。将用户的shell设置为/bin/false,用户会无法登录…