CSS完成几行文本两边两端对齐的实际效果

企业网站建设全过程中在做前台接待页面的情况下,例如一些文本的目录或是一些表格的题目,常常是两个字,3个字,4个字的种类。一般两端对齐便是先在间打空格符或空开,可是实际效果其实不好,适配性不太好,导致不美观大方。历经一番瞎折腾,

寻找了较为好的方法处理。运用letter-spacing来处理:

letter-spacing 特性提升或降低标识符间的空白页(标识符间隔)。

该特性界定了在文字标识符框中间插进是多少室内空间。因为标识符字型一般比其标识符框要窄,特定长短值时,会调节英文字母中间一般的间距。因而,normal 就非常于数值 0。

下列是完成的编码,能够拷贝出来在当地运作看实际效果,还非常好额。

实际效果图:


 style type= text/css 
.hotsearch dd{
float: left;
line-height: 24px;
margin-right: 30px;
overflow: hidden;
text-align: center;
width: 4em; /*这一值是看最多能显示信息好多个文本,如x,则为x em*/
.hotsearch dd a{
display:block;
letter-spacing:2em; /*假如必须y个字两边两端对齐,则为(x-y)/(y-1),这儿是(4-2)/(2-1)=2em */
margin-right:-2em; /*跟上面一样*/
letter-spacing:0.5em; /*假如必须y个字两边两端对齐,则为(x-y)/(y-1),这儿是(4-3)/(3-1)=0.5em */
margin-right:-0.5em; /*跟上面一样*/
 /style 
 dl  >

CSS实现多行文字两端对齐的效果_昆明网站建设






企业 ©  

云南省省昆明市市官渡区金龙路886号金龙悦城1栋3209室

0

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://jzabcd.cn/ziyuan/3979.html