一行两端对齐justify-content
一、之前不了解css3的属性,更没听过flex布局
在处理表单前面的文字,两端对齐,按照我之前的前端人员,加空格处理,但是在不浏览器解析空格的宽是不一样的
上图就用空格,在不同浏览器显示的效果,有时候字体会溢出,这时候要用letter-space,那就更加……
所以这个种方法不可取
这个时候就用到flex布局,详细教程,参考下面网址
详细参考:http://www.webclks.com/archives/3016
测试:http://www.runoob.com/cssref/css3-pr-justify-content.html
这里简单给出一个例子:
css:
html
效果:
二、但是这样会添加很多标签,这个时候我可以采用第二种方法,利用转义符
" ":(non-breaking space,nbsp,#160),这是我们使用最多的空格,也就是按下space键产生的空格。在HTML中,如果你用空格键产生此空格,空格是不会累加的(只算1个)。要使用html实体表示才可累加。为了便于记忆,我总是把这个空格成为“牛逼(nb)空格(sp - space)”,虽然实际上并不牛逼。该空格占据宽度受字体影响明显而强烈。在inline-block布局中会搞些小破坏,在两端对齐布局中又是不可少的元素。
" ":(en space,ensp,#8194),该空格学名不详。为了便于记忆,我们不妨就叫它“恶念(e n-ian)空格”。此空格传承空格家族一贯的特性:透明滴!此空格有个相当稳健的特性,就是其占据的宽度正好是1/2个中文宽度,而且基本上不受字体影响。
" ":(em space,emsp,#8195),为了便于记忆,我们不妨就叫它"恶魔(e m-o)空格"。此空格也传承空格家族一贯的特性:透明滴!此空格也有个相当稳健的特性,就是其占据的宽度正好是1个中文宽度,而且基本上不受字体影响。
" ":(thin space,#8201),窄空白(小于1个字符宽度),受字体影响程度未知。
示例代码:
效果:
三、还有一种利用全角,但是由于输入发和我的编辑冲突,我没选择此种方法,
*ensp; 半角转义符   全角转义符
胆石症何种方法4个子好用,一档字数超过就不好用了
这种方法的参考一个网址如下:
http://passport.cnblogs.com/register.aspx?ReturnUrl=http://home.cnblogs.com/u/liangcheng11/
一行两端对齐justify-content的更多相关文章
- 完美 全兼容 解决 文字两端对齐 justify 中文姓名对齐
text-align:justify; 所有浏览器都支持,text-justify之类的却只有IE支持,就不要考虑了. justify我的理解,使元素内部的子元素两端对齐,子元素当然只能是inline ...
- 两端对齐justify
//容器设定text-align:justify.justify{ text-align: justify; } //容器里面的元素 .justify i{ width:24px; line-heig ...
- CSS两端对齐
前面的话 两端对齐在导航条Tab的制作中非常常用.本文将详细介绍CSS两端对齐的3种实现方式 flex 弹性盒模型flex作为强大的弹性布局方式,可以hold住大部分的布局效果,当然也包括两端 ...
- CSS实现文字两端对齐
最近的项目遇到了这样的需求:(要求标题部分不管文字多少,都必须两端对齐) 如下图: 当时也没有多想直接使用‘ ’进行代替,毕竟产品同学想快一点看到效果,不敢怠慢!不过到第二个页面就傻眼了. 如图: 这 ...
- CSS3 justify 文本两端对齐
浏览器参照基准:Firefox4 and Later, Chrome5 and Later, Safari5 and Later, Opera10.53 and Later, IE5.5 and La ...
- 使用text-align:justify,让内容两端对齐,兼容IE及主流浏览器的方法
如果不喜欢看分析过程,可以跳到最后看最终兼容方案 史前方法: 以前实现两端对齐是这样的: <p class="box1">密 码</p> <p cl ...
- CSS:两端对齐原理(text-align:justify)
我是一个小白我是一个小白我是一个小白喷我吧,哈哈 写样式的是时候经常会碰到字体两端对齐的效果,一般就网上找端css样式复制下就结束了,没有考虑过原理是啥贴下代码 <head> <me ...
- 自适应的两端对齐:text-align:justify
<!DOCTYPE HTML> <html> <head> <title>文本两端对齐 by hongchenok</title> < ...
- css实现左右两端对齐均匀排列 text-align: justify
1.实现一行文字的两端对齐均匀排列 为了实现效果只是加上一个text-align: justify;是没效果的.所以需要加上一个空标签<span><i>都可以,也可以用伪类来写 ...
随机推荐
- 产生一个int数组,长度为100,并向其中随机插入1-100,并且不能重复
产生一个int数组,长度为100,并向其中随机插入1-100,并且不能重复 用一个ArrayList存储1到100然后随机产生0到arraylist.size()之间的数字作为下标然后从arrayli ...
- 移动web app开发小贴士 收藏有用
1 创建主屏幕图标 (Creating a home screen icon ,for ios) 1 2 3 4 5 6 //57*57 <link rel="apple-touc ...
- 活跃天数计算用户等级模仿QQ的升级方式
QQ等级的算法:设当前等级为N,达到当前等级最少需要的活跃天数为D,当前活跃天数为Dc,升级剩余天数为Dr,则: 从而推出: 好了,引述完成,懒得写字了,贴出代码: 复制内容到剪贴板 代码: < ...
- [转自51CTO]ITIL与ISO20000的关系
ITIL它不是一个服务管理标准,而更应该说是一种结构化的方法或流程框架.基于这种方法和框架,已经有越来越多的IT服务管理标准被开发出来了.在这些基于ITIL的IT服务管理标准中,最突出的要属英国标准B ...
- Responsive布局技巧
在Responsive布局中,可以毫无保留的丢弃: 第一, 尽量少用无关紧要的div: 第二,不要使用内联元素(inline): 第三,尽量少用JS或flash: 第四,丢弃没用的绝对定位和浮动样式: ...
- ORA-12518: TNS: 监听程序无法分发客户机连接
在团队成员增多时,经常出现“无法分发客户端连接”等问题.在网上搜索一番后,最终解决了该问题,现将解决方案总结如下,以供参考和以后备用. 原因:团队成员增多,原有数据库设置不够用,导致连接plsql和启 ...
- 【翻译】Kinect v2程序设计(C++) Depth编
Kinect SDK v2预览版,取得Depth数据的方法说明. 上一节,介绍了通过使用Kinect for Windows SDK v2预览版(以下简称为,Kinect SDK v2预览版)从Kin ...
- phpstorm配置svn
phpstorm配置svn 发表于3年前(2013-02-28 10:50) 阅读(8249) | 评论(0) 4人收藏此文章, 我要收藏 赞1 9月19日成都 OSC 源创会正在报名,送机械键盘 ...
- Python中dict的特点、更新dict、遍历dict
dict的第一个特点是查找速度快,无论dict有10个元素还是10万个元素,查找速度都一样.而list的查找速度随着元素增加而逐渐下降. 不过dict的查找速度快不是没有代价的,dict的缺点是占用内 ...
- centos FTP服务器的架设和配置
yum install vsftpd 2.启动/重启/关闭vsftpd服务器 [root@localhost ftp]# /sbin/service vsftpd restart Shutting d ...