一、之前不了解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的更多相关文章

  1. 完美 全兼容 解决 文字两端对齐 justify 中文姓名对齐

    text-align:justify; 所有浏览器都支持,text-justify之类的却只有IE支持,就不要考虑了. justify我的理解,使元素内部的子元素两端对齐,子元素当然只能是inline ...

  2. 两端对齐justify

    //容器设定text-align:justify.justify{ text-align: justify; } //容器里面的元素 .justify i{ width:24px; line-heig ...

  3. CSS两端对齐

    前面的话   两端对齐在导航条Tab的制作中非常常用.本文将详细介绍CSS两端对齐的3种实现方式 flex   弹性盒模型flex作为强大的弹性布局方式,可以hold住大部分的布局效果,当然也包括两端 ...

  4. CSS实现文字两端对齐

    最近的项目遇到了这样的需求:(要求标题部分不管文字多少,都必须两端对齐) 如下图: 当时也没有多想直接使用‘ ’进行代替,毕竟产品同学想快一点看到效果,不敢怠慢!不过到第二个页面就傻眼了. 如图: 这 ...

  5. CSS3 justify 文本两端对齐

    浏览器参照基准:Firefox4 and Later, Chrome5 and Later, Safari5 and Later, Opera10.53 and Later, IE5.5 and La ...

  6. 使用text-align:justify,让内容两端对齐,兼容IE及主流浏览器的方法

    如果不喜欢看分析过程,可以跳到最后看最终兼容方案 史前方法: 以前实现两端对齐是这样的: <p class="box1">密  码</p> <p cl ...

  7. CSS:两端对齐原理(text-align:justify)

    我是一个小白我是一个小白我是一个小白喷我吧,哈哈 写样式的是时候经常会碰到字体两端对齐的效果,一般就网上找端css样式复制下就结束了,没有考虑过原理是啥贴下代码 <head> <me ...

  8. 自适应的两端对齐:text-align:justify

    <!DOCTYPE HTML> <html> <head> <title>文本两端对齐 by hongchenok</title> < ...

  9. css实现左右两端对齐均匀排列 text-align: justify

    1.实现一行文字的两端对齐均匀排列 为了实现效果只是加上一个text-align: justify;是没效果的.所以需要加上一个空标签<span><i>都可以,也可以用伪类来写 ...

随机推荐

  1. CSS HTML链接去掉小手与增添小手

    style="cursor: hand" crosshair:精确定位“十”字形: text:文本“I”形: wait:等待,“沙漏”形: default:默认指针: help:帮 ...

  2. web应用防火墙 – 安全伞18.5.1免费版本发布

    “Safe3 Web Application Firewall"是国内安全组织保护伞网络基于新一代Web安全技术开发的全方位企业Web信息安全产品.能有效扫描各种WebShell,同时也可以 ...

  3. visual 2008中error PRJ0003 : 生成 cmd.exe 时出错

    visual 2008中error PRJ0003 : 生成 cmd.exe 时出错”,   和vs2008 sp1没关系 解决方案:工具—>选项—>项目和解决方案—>VC++目录, ...

  4. mysql关于字符串字段数据类型

    字符串类型 字符串类型指CHAR.VARCHAR.BINARY.VARBINARY.BLOB.TEXT.ENUM和SET.该节描述了这些类型如何工作以及如何在查询中使用这些类型. 类型 大小 用途 C ...

  5. 在Delphi中如何控制其它应用程序窗口

    在编写Delphi的应用程序中,常常涉及对其它Windows应用程序的操作.例如,在数据库的管理系统中,财务人员需要使用计算器,即可调用Windows内含的计算器功能,若每次使用,均通过“开始/程序/ ...

  6. 一个字符串中可能包含a~z中的多个字符,如有重复,如String data="aavzcadfdsfsdhshgWasdfasdf",求出现次数最多的那个字母及次数,如有多个重复的则都求出。

    主要掌握String中的方法 char[] toCharArray()           将此字符串转换为一个新的字符数组. int indexOf(String str)           返回 ...

  7. mysql 权限篇

    mysql库 user(用户以及所有库权限配置) db(具体库权限配置) 配置完毕要用命令 FLUSH PRIVILEGES; 刷新权限 备份数据库可以直接copy文件的形式,不过这样copy的文件会 ...

  8. json格式的转换为json字符串函数

    function toJSON(object){ var type = typeof object; if ('object' == type) { if (Array == object.const ...

  9. Ubuntu 14.04 LTS 64bit 编译SDL的问题

    http://blog.csdn.net/jhting/article/details/38523945 Ubuntu 14.04 LTS 64bit 编译SDL的问题 分类: C/C++2014-0 ...

  10. C# .Net实现URL绝对路径和相对路径之间互相转换

    网站制作开发中,URL的绝对路径和相对路径之间互相转换,是经常需要用到的.以下是在C#.Net下一种实现二者互相转化的方法: [DllImport("shlwapi.dll", C ...