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,一经查实,立即删除!

相关文章

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

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

作业,两次实验

实验一&#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;但有一个参考…

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

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

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

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

【覆盖安装】通用测试点

需要xmind文档请留言将会私发。 转载于:https://www.cnblogs.com/syw20170419/p/10457600.html

菜鸟裹裹电脑版_【绵阳最新转让】3500低价出售家用制氧机!东芝i5笔记本电脑、索尼微单相机、联想笔记本电脑、奶茶店、服装店转让......

转换价值&#xff0c;传承梦想西蜀网让你淘好物~3500出售鱼跃家用制氧机&#xff0c;带雾化全新鱼跃152021/9F_5W型家用制氧机&#xff0c;带雾化。正规医疗器械公司买的&#xff0c;有小票&#xff0c;买到只用了一次&#xff0c;买成4382现低价转让。联系电话&#xff1a;邓女…

Linux环境中配置环境变量无效

1.在Linux系统中的【 ~/.baserc 】文件与【 /etc/profile 】配置环境变量后(可以使任意环境变量)无效的现象&#xff0c;如下为解决办法&#xff1a; 使用命令&#xff1a; 1 vim ~/.zshrc 在 【# User configuration】下添加环境变量&#xff1b; 如图说明&#xff1a; 2.也可…

手机能打开的表白代码_手机拍照还能加文字?打开这个自带按钮,一键就能添加方便...

手机拍照还能文字&#xff1f;打开这个自带按钮&#xff0c;一键就能添加方便我们日常生活中&#xff0c;经常会在朋友圈里面看到&#xff0c;这样的图片&#xff0c;不仅图片好看&#xff0c;上面还带有精美的文字&#xff0c;里面还添加了时间、地点、天气&#xff0c;在配上…

Spring Cloud Eureka 入门 (二)服务提供者详解

2019独角兽企业重金招聘Python工程师标准>>> 摘要: 原创出处:www.bysocket.com 泥瓦匠BYSocket 希望转载&#xff0c;保留摘要&#xff0c;谢谢&#xff01; “优秀不是过去是一种心态” 「Spring Cloud Eureka 入门系列」Spring Cloud Eureka 入门 &#xff08;一…

二进制文件更新程序_APR 6.17程序文件更新

兰博基尼程序文件更新Lamborghini Huracan EURO MY2018 5.2L V10 DKBC 4T0907552L S0002 Stage 1 V1.1 [APR Mobile]奥迪程序文件更新Audi A3 / VW GTI NA MY2014 2.0TSI CNTC 5G0906259A S0001 Stage 1 V2.0.3 [2WD] [Single Program]Audi A3 / VW GTI NA MY2014 2.0TSI CNTC …

拨盘Demo大赛,获奖公布-20170710

2019独角兽企业重金招聘Python工程师标准>>> 为了答谢微信小程序联盟的新老会员&#xff0c;极乐科技支持举办的拨盘大赛终于落幕&#xff0c;本次大赛有662人关注&#xff0c;报名参赛8位&#xff0c;获奖名单如下&#xff1a; ##一、获得1000元现金奖励的参赛者 会…

vscode 不能运行h5c3代码_让开发效率“飞起”的VS Code 插件

前言VSCode&#xff0c;是一个免费的、开源的跨平台编辑器,也是我最满意的编辑器之一。本文向大家推荐一些我喜欢的vscode插件&#xff0c;不出意外的话&#xff0c;这些插件将对你的工作效率提升有不小的帮助&#xff01;GitLensVS Code中的 Git 体验在易用性和完整性之间取得…

dedecms plus/download.php,dedecms教程:DedeCMS 5.7SP1 /plus/download.php url重定向漏

最近使用scanv网站体检发现有DedeCMS 5.7SP1 /plus/download.php url重定向漏洞(如下图)&#xff0c;对比官方网站最新下载包发现该漏洞未进行补丁&#xff0c;但官方自身网站已经补上了&#xff0c;而官方演示站点均未补上。参考了下网上给出的漏洞原因和解决思路如下&#xf…

C language day1

2019独角兽企业重金招聘Python工程师标准>>> http://www.eclipsecolorthemes.org/?viewtheme&id66设置eclispe编辑器主题 http://www.cnblogs.com/csulennon/p/4231405.html 配置黑色主题 Dogs.c 第一段代码片段 /*Name : Dogs.cAuthor : MichaelV…

Xftp远程连接出现“无法显示文件夹”的问题补充

网上有很多朋友出现相同的问题&#xff0c;各位热心网友都给出了自己的解决方案&#xff0c;其中大多数网友给出的解决方案都是&#xff1a;将Xftp更换成“被动连接模式”。但是很不幸的是&#xff0c;本人通过这种方式并没有得到有效的解决&#xff0c;网上的各大方法都尝试&a…

Bootstrap中水平排列的表单form-inline

1 <html>2 <head>3 <title>初识Bootstrap</title>4 <meta charset"utf-8">5 <meta name"viewport" content"widthdevice-width, initial-scale1.0">6 <link rel"stylesheet" href"http:/…

minio 授予永久访问权限_应对 iOS 14 权限管理 应用手把手教你打开“所有照片”权限...

DoNews 11月3日消息(记者 刘文轩)苹果在 iOS 14 中带来全新的隐私管理功能&#xff0c;其中最亮眼的就是相册权限方面&#xff0c;可以为应用程序授予单独授予某张照片的访问权限&#xff0c;无需交出整个相册。作为 iOS 14 主推新功能之一&#xff0c;这项功能也很快得到开发者…

计算机基础,你知道蓝屏的原因吗

2019独角兽企业重金招聘Python工程师标准>>> 电脑蓝屏的现象是经常见到的一件家常便饭了&#xff0c;它是属于突发事件&#xff0c;电脑蓝屏让我们猝手不及&#xff0c;很多时候是很让人心烦。电脑蓝屏首先要找到原因&#xff0c;然后进行维修。那么电脑蓝屏到底是怎…

2个字节能存多少个16进制_Java语言中最大的整数再加1等于多少?看完秒懂

短文涨姿势&#xff0c;看了不白看&#xff0c;不关注等啥&#xff1f;已知Java语言中int类型所能表示的最大整数为2147483647,请问以下代码执行结果是什么&#xff1f;一部分人都会认为这段程序压根就无法通过编译&#xff0c;也有人认为&#xff0c;这段程序能够通过编译&…