您好,欢迎来到我要学flash网!登录注册

如何让两个字的宽度和三个字的宽度相同

来源:我要学flash网 | 作者:admin | 发表时间:2012-03-03 | 点击:  次

我们都遇到过这样的问题,在做用户登录的时候,我们会遇到用户名:密码设计稿上要求的是“用户名”的宽度和“密码”的宽度是相同的,这个时候你首先想到的是哪些方法呢?
一是添加两个
二是给密码两个字各添加一个标签使用padding或者是margin来控制。
当然你或许会说在内容和形式分类的角度上应该是后者较好,但是后者也是需要添加许多的无语义的标签以及写一段css来实现的。
前面这些只是你想到的,真正在实现上或许还有许多的问题?为什么这样说呢?好那就拿第一个方法就是添加两个 想着应该是没有什么问题的,但是
在不同的浏览器之间显示的不尽相同,就拿我来说,在Firefox和IE8上看到是想要的效果,但是在IE7和6上看到是两个 并不是一个汉字的宽度,怎么解决呢?那就是把字体设置成“宋体”可以实现在IE6、7、8和火狐以及chrome上相同,其余的浏览器没有测试!
第二中方法可以实现并且手段也很多,但是在语义和代码上很冗余,就我来说如果没有更好的方法,让我选择我会果断的选择第一种。
现在我们来看看第三种方法,记得css的letter-spacing吗?对就是它,只需要设置letter-spacing:1em;就可以了,我测试了一下在IE6,7,8以及火狐和chrome上都是正常的。
下面我贴出代码你可以测试一下:

  1. <style>
  2. * { padding:0; margin:0;}   
  3. #login { width:400px; height:300px; margin:0 auto; line-height:1.8; }   
  4. .key { letter-spacing:1em;}   
  5. .key1 { font-family:"宋体";}
  6. </style>   
  7. <div id="login"> 
  8.  <span class="userName">用户名</span>   
  9.  <span class="key">密码</span>   
  10.  <span class="key1">密  码</span> 
  11. </div> 

设置字体为宋体的代码:

没有设置字体为宋体的代码:

  1. <style> 
  2. * { padding:0; margin:0;}   
  3. #login { width:400px; height:300px; margin:0 auto; line-height:1.8;}   
  4. .key { letter-spacing:1em;}   
  5. .key1 { font-family:"Times New Roman", Times, serif;}   
  6. </style> 
  7. <div id="login"> 
  8.  <span class="userName">用户名</span> 
  9.  <span class="key">密码</span> 
  10.  <span class="key1">密  码</span> 
  11. </div> 

 


顶一下
(0)
0%
踩一下
(0)
0%
本文引用地址:
  最新评论: 共有位网友发表了评论
  发表评论:
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
用户名: 密码: 验证码: