码迷,mamicode.com
首页 > 其他好文 > 详细

haley解决中文字段名称字数不同时两端对齐的问题

时间:2016-12-09 07:48:41      阅读:234      评论:0      收藏:0      [点我收藏+]

标签:分享   编码   com   round   auth   ima   对齐   let   math   

做项目的时候,最恶心的就是字段名称字数不同,比如“姓名”,“公司名”,“手机号码”,类似这样的问题真让人头大。

现在写个jq的方法来解决这个问题。

先上效果图

技术分享

现在贴代码:

 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, user-scalable=no, target-densitydpi=device-dpi">
 6     <meta name="Author" content="haley">
 7     <meta name="Keywords" content="">
 8     <meta name="Description" content="">
 9     <script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
10     <title>解决中文字数不同对齐问题</title>
11 </head>
12 <body>
13 <h2>
14     2016年12月9日 haley解决中文字数不同对齐问题
15 </h2>
16 <div style="padding-left:30px;width:290px;">
17     <p class="nameLs">手机号</p>
18     <p class="nameLs">姓名</p>
19     <p class="nameLs">固定电话</p>
20     <p class="nameLs">中文公司名称</p>
21     <p class="nameLs">邮政编码号</p>
22     <p class="nameLs">一个特殊字段名称</p>
23     <p class="nameLs">又一个特殊字段名称</p>
24     <p class="nameLs">又又一个特殊字段名称</p>
25 </div>
26 <script>
27     (function($){
28         $.fn.extend({
29             ls:function(){
30                 var arr=[];
31                 $.each(this,function(){
32                     arr.push($(this).html().split(‘‘).length);
33                 });
34                 console.log(arr);
35                 $.each(this,function(){
36                     var max=Math.max.apply(null, arr);
37                     var n=$(this).html().split(‘‘).length;
38                     console.log("max:"+max);
39                     var ls=(max-n)/(n-1);
40                     $(this).css({
41                         letter-spacing:ls+em
42                     });
43                 });
44 
45             }
46         });
47     })(jQuery);
48     $(.nameLs).ls();
49 </script>
50 </body>
51 </html>

基本能满足正常需求。但是还有一点小bug,就是右侧占位比较多,需要调节一下。

haley解决中文字段名称字数不同时两端对齐的问题

标签:分享   编码   com   round   auth   ima   对齐   let   math   

原文地址:http://www.cnblogs.com/haley168/p/number.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!