两端对齐(兼容较好,支持IE)
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
div{
width: 200px;
height: 20px;
border: 1px solid grey;
text-align:justify;
text-justify:distribute-all-lines;/*ie6-8*/
-webkit-text-align:justify;
text-align-last:justify;/* ie9*/
-moz-text-align-last:justify;/*ff*/
-webkit-text-align-last:justify;/*chrome 20+*/
}
@media screen and (-webkit-min-device-pixel-ratio:0){ /*兼容chrome*/
div:after{
content:".";
display: inline-block;
width:100%;
overflow:hidden;
height:0;
}
}
</style>
</head>
<body>
<div>文 本 两 端 对 齐</div>
<div>文 本 两 端 齐</div>
</body>
</html>
注:每个文字之间需要要加一个空格,不然chrome下不兼容,火狐中文字之间的空隙不一致
两端对齐(兼容较好,支持IE)的更多相关文章
- css中文字两端对齐兼容IE
text-align: justify; text-justify:inter-ideograph;
- 使用text-align:justify,让内容两端对齐,兼容IE及主流浏览器的方法
如果不喜欢看分析过程,可以跳到最后看最终兼容方案 史前方法: 以前实现两端对齐是这样的: <p class="box1">密 码</p> <p cl ...
- 兼容IE的两端对齐
div+css布局实现2端对齐是我们网页排版中经常会使用到的,这篇文章将总结一下可以实现的方法: html结构 实现demo里面的div通过Css进行2端对齐. <div class=" ...
- 【原】css实现两端对齐的3种方法
说到两端对齐,大家并不陌生,在word.powerpoint.outlook等界面导航处,其实都有一个两端对齐(分散对齐)的按钮,平时使用的也不多,我们更习惯与左对齐.居中对齐.右对齐的方式来对齐页面 ...
- css实现两端对齐的3种方法
两端对齐在移动端非常见,说到两端对齐,大家并不陌生,在word.powerpoint.outlook等界面导航处,其实都有一个两端对齐(分散对齐)的按钮,平时使用的也不多,我们更习惯与左对齐.居中对齐 ...
- CSS两端对齐
前面的话 两端对齐在导航条Tab的制作中非常常用.本文将详细介绍CSS两端对齐的3种实现方式 flex 弹性盒模型flex作为强大的弹性布局方式,可以hold住大部分的布局效果,当然也包括两端 ...
- 完美 全兼容 解决 文字两端对齐 justify 中文姓名对齐
text-align:justify; 所有浏览器都支持,text-justify之类的却只有IE支持,就不要考虑了. justify我的理解,使元素内部的子元素两端对齐,子元素当然只能是inline ...
- CSS3 justify 文本两端对齐
浏览器参照基准:Firefox4 and Later, Chrome5 and Later, Safari5 and Later, Opera10.53 and Later, IE5.5 and La ...
- css文字两端对齐
css文字两端对齐 text-align:Justify(火狐); text-justify:inter-ideograph(IE) text-justify(IE) 基本语法 text-justif ...
- css实现两端对齐~
今天做表单时遇到让上下两个字段对齐的情况,手机号码.用户名. 然后今天在网上找了找相关方法,发现确实是没有什么好的方法解决,特别是当需要兼容的时候.找到了两个我觉得相对还不错的方法: 方法一.是在司徒 ...
随机推荐
- 改变HTML
改变HTML 1.改变HTML输出流 JavaScript可以创建动态的HTML内容.(注意:不要在加载文档后使用document.write(),这会覆盖文档.) <%@ page langu ...
- HDU 5688 Problem D map
Problem D Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/65536 K (Java/Others)Total S ...
- LKDBHelper小细节
1,用LKDBHelper插入数据 如果主键一致 就自动删除之前的插入新的数据: 此为:根据主键保持数据的唯一性. 主键相同自动覆盖,相当于修改.
- JAVA程序的创建与编辑
1.JAVA项目的创建与命令编辑 打开JAVA程序,选择工具栏上的创建按钮旁边的小三角,在下拉菜单中选择创建JAVA项目,在出现的对话窗口中输入项目名,在JRE使用执行环境中选择可用的资源包,如果安装 ...
- 【转载】20分钟MySQL基础入门
原文:20分钟MySQL基础入门 这里持续更新修正 开始使用 MySQL 为关系型数据库(Relational Database Management System),一个关系型数据库由一个或数个表格 ...
- CentOS 7一些常用配置
一.更改启动模式 背景:个人开发环境,安装了GNOME桌面,默认启动是图形化模式. 修改为命令行模式. systemctl set-default multi-user.target 二.命令行模式下 ...
- [51NOD1095] Anigram单词(map)
题目链接:http://www.51nod.com/onlineJudge/questionCode.html#!problemId=1095 字典的单词在map中排序和不排序各存1次,查的时候相减. ...
- [SAP ABAP开发技术总结]FTP到文件服务器,服务器上文件读写
声明:原创作品,转载时请注明文章来自SAP师太技术博客( 博/客/园www.cnblogs.com):www.cnblogs.com/jiangzhengjun,并以超链接形式标明文章原始出处,否则将 ...
- hdu 4946 Area of Mushroom(凸包)
链接:http://acm.hdu.edu.cn/showproblem.php?pid=4946 Area of Mushroom Time Limit: 2000/1000 MS (Java/Ot ...
- NoSQL聚合数据模型
NoSQL聚合数据模型 特点 聚合数据模型的特点就是把经常访问的数据放在一起(聚合在一块): 这样带来的好处很明显,对于某个查询请求,能够在与数据库一次交互中将所有数据都取出来: 当然,以这种方式存储 ...