首页 > 代码库 > haley解决中文字段名称字数不同时两端对齐的问题
haley解决中文字段名称字数不同时两端对齐的问题
做项目的时候，最恶心的就是字段名称字数不同，比如“姓名”，“公司名”，“手机号码”，类似这样的问题真让人头大。
现在写个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解决中文字段名称字数不同时两端对齐的问题
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。