Heim >Web-Frontend >HTML-Tutorial >css实现两端对齐~_html/css_WEB-ITnose

css实现两端对齐~_html/css_WEB-ITnose

WBOY
WBOYOriginal
2016-06-24 11:15:281107Durchsuche

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

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

方法一、是在司徒正美的博客上看到的—— 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:0;      }  }

    这种方法试了试,发现还是有些问题,是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得。

    Stellungnahme:
    Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn