今天做表单时遇到让上下两个字段对齐的情况,手机号码、用户名。

然后今天在网上找了找相关方法,发现确实是没有什么好的方法解决,特别是当需要兼容的时候。找到了两个我觉得相对还不错的方法:

方法一、是在司徒正美的博客上看到的—— text-align, text-justify;

需要设置 text-align为justify就行了,text-justify的情况复杂些。IE的取值如下:

  • auto :允许浏览器用户代理确定使用的两端对齐法则
  • inter-word :通过增加字之间的空格对齐文本。该行为是对齐所有文本行最快的方法。它的两端对齐行为对段落的最后一行无效
  • newspaper : 通过增加或减少字或字母之间的空格对齐文本。是用于拉丁文字母表两端对齐的最精确格式
  • distribute :处理空格很像newspaper,适用于东亚文档。尤其是泰国
  • distribute-all-lines :两端对齐行的方式与distribute相同,也同样不包含两段对齐段落的最后一行。适用于表意字文档
  • inter-ideograph : 为表意字文本提供完全两端对齐。他增加或减少表意字和词间的空格

但它最早是作为IE的私有实现,像text-overflow, overflow-x等,在FF很晚才实现,换言之有严格的兼容性问题。并且FF,chrome需要手动在汉字间插入空白或软换行标签才生效,在chrome遇到的阻力就更大了。

.test1 {
text-align:justify;
text-justify:distribute-all-lines;/*ie6-8*/
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*/
.test1:after{
content:".";
display: inline-block;
width:100%;
overflow:hidden;
height:;
}
}

这种方法试了试,发现还是有些问题,是test1需要时块元素,如果是航标签的话,需要设置display:block;

原文章:http://www.cnblogs.com/rubylouvre/archive/2012/11/28/2792504.html

方法二、这个是无意中看到的,之前也想过但从来没这么做过,没想到真有人做了。

就是用table方法,按做表格的方式来做,这样文字肯定会平均分开。(O(∩_∩)O哈哈~别鄙视我!)

也可以类似的设置display:table属性:

table层设置display:table,td层设置display:table-cell。

当然原理是一样的,这么做需要每个字一个外框分割开来,方法确实不错,但是感觉挺BT得。

css实现两端对齐~的更多相关文章

  1. 【原】css实现两端对齐的3种方法

    说到两端对齐,大家并不陌生,在word.powerpoint.outlook等界面导航处,其实都有一个两端对齐(分散对齐)的按钮,平时使用的也不多,我们更习惯与左对齐.居中对齐.右对齐的方式来对齐页面 ...

  2. css文字两端对齐

    css文字两端对齐 text-align:Justify(火狐); text-justify:inter-ideograph(IE) text-justify(IE) 基本语法 text-justif ...

  3. css实现两端对齐的3种方法

    两端对齐在移动端非常见,说到两端对齐,大家并不陌生,在word.powerpoint.outlook等界面导航处,其实都有一个两端对齐(分散对齐)的按钮,平时使用的也不多,我们更习惯与左对齐.居中对齐 ...

  4. CSS实现两端对齐效果

    CSS实现两端对齐效果 两端对齐,从概念上来说,其实不难理解.如果不明白什么叫两端对齐,可以玩玩word等办公软件. 下面谈谈如何实现文本的两端对齐.我所知道的大概有以下几种方法 text-align ...

  5. p标签text-align:justify以及CSS文字两端对齐

    p标签样式添加text-align:justify; 那么就会左右对齐. 使用前: 使用后: CSS文字两端对齐 使用前: 代码: <style> div{ width:100px; he ...

  6. css 字体两端对齐

    我想作为一个前端工作者,总会遇到这样的场景,一个表单展示的字段标题有4个字也有2个字的时候,这样子同时存在想展示的美观一点,就需要字体两端对齐了,其实实现方式很简单,我针对其中一种来做下介绍,以后方法 ...

  7. CSS图片两端对齐,自适应列表布局末行对齐修复实例页面

    写在前面 前端开发,图片两端对齐,是十分常见的,也是十分痛苦的,我试过好多方法,通过整理,认为下面还是比较靠谱的,在实践中大家可以试试,欢迎一起学习,一起进步 HTML代码 HTML代码非常简单,用的 ...

  8. css 文本两端对齐

    在做表单时我们经常遇到让上下两个字段对齐的情况,比如姓名, 手机号码, 出生地.这样我们就要用到 text-align, text-justify样式了. text-align直接设为justify就 ...

  9. 可用的CSS文字两端对齐

    最近在工作项目中接触到Web界面设计的问题,要实现文字两端对齐的效果.在网上搜索了一下,用的都是类似的技巧: text-align:justify;text-justify:inter-ideogra ...

随机推荐

  1. 统计"面"要素中"点"要素的个数.

    步骤 1,创建字段 IFields /// <summary> /// 创建:"面"-"点数"的字段. /// </summary> / ...

  2. JDK6和JDK7中的substring()方法

    substring(int beginIndex, int endIndex)在JDK6与JDK7中的实现方式不一样,理解他们的差异有助于更好的使用它们.为了简单起见,下面所说的substring() ...

  3. poj1611 简单并查集

    The Suspects Time Limit: 1000MS   Memory Limit: 20000K Total Submissions: 32781   Accepted: 15902 De ...

  4. 3月23日html(四) 格式与布局

    一.position:fixed 锁定位置(相对于浏览器的位置),例如有些网站的右下角的弹出窗口. 二.position:absolute 1.外层没有position:absolute(或relat ...

  5. webapi 上传图片

    需求:上传学员信息时同时上传头像信息,学员基本信息表和科目表为一对多关系表(添加基本信息后添加通过科目信息).   测试: [HttpPost] public string Post() { if ( ...

  6. ActionBar +Tab+ViewPager +Fragment 支持侧滑动完成办税工具的页面展示

    1:fragment_zhqrl.xml(征期日历) <?xml version="1.0" encoding="utf-8"?> <Line ...

  7. LeetCode_Trapping Rain Water

    Given n non-negative integers representing an elevation map where the width of each bar is 1, comput ...

  8. 自制单片机之十……AT89S51的上拉电阻问题

    很多网友都问我AT89S51的P0口为什么要接一个上拉电阻.我就用一个篇幅来说一说 P0口和其它三个口的内部电路是不同的,如下图 P0口是接在两个三极管D0和D1之间的,而P1-P3口的上部是接一个电 ...

  9. Qt浅谈之四十九俄罗斯方块(代码来自网络)

    一.简介 从网上下载了一个Qt实现的俄罗斯方块单机版的源码,觉得非常有意思,故以博客形式记录下来,以便慢慢来研究.在centos6.6下编译运行(注意程序运行需要读取pro目录的配置文件,若把编译目录 ...

  10. nodejs教程

    http://www.yiibai.com/nodejs/ http://www.runoob.com/nodejs/nodejs-tutorial.html http://www.runoob.co ...