注册 登录  
 加关注
查看详情
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

阿当的博客

世界是个游乐场

 
 
 

日志

 
 

布局小技巧 空格的妙用  

2008-08-19 11:59:00|  分类: Css |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
    在布局的时候,我们经常会遇到这样的问题:文字之间有一点间距,可是打空格又不够,补转义空格 又要补很多,因为一个 占的位置实在太短了。还有时候,经常会遇到的问题,如下:
============================
物品名称:dfasisd
详细参数:dasi wfso
价格:sdfisfsd
============================
我们遇到这样的地方,前两个左边都是四个字"物品名称","详细参数",而最后一个价格却只有两个字,当然我们可以直接按上面的格式写出来,可是这样对不齐,不好看。如果要对齐,我们可以在价格中间不停地补 直到和上面对齐,可是这种方法也不是很好用,因为中文和英文占的字节数不一样,很有可能怎么补 最后也还是对不齐,差几象素。那么,我们还有一种做法,就是这样:
<li><span>物品名称:</span>dfasisd</li>
<li><span>详细参数:</span>dasi wfso</li>
<li><span>价格:</span>sdfisfsd</li>

li span{float:left;width:80px;}
给这几个左边的文字包一个span,设置为左浮动,然后给定一个宽度,这样,就会让冒号右边的文字左对齐。这当然是个办法,可是,还有一个更简单的办法,就是使用空格!

注意,这个空格不是一般的空格,而是圆角的空格,把输入法设置成圆角,再输入空格,就会把这个空格当做中文来用了,这个时候输入的空格就已经不再是正常的空格,它占的位置是一个中文的宽度,而且已经不受"输入多个连续空格只按一个空格显示"的约束了!我们可以在价格中间连续输入两个空格就可以轻松让他们对齐。而我们上面一开始提到的一段比普通空格长,又不算太长的间距,也可以通过连续输入适量空格解决了。唯一有点担心的就是程序员在配程序时,会不会把这些“空格”理解为你布局时留白的失误,而好心地优化山删除掉了,哈。

效果如下:
=======================================
物品名称:dfasisd
详细参数:dasi wfso
价  格:sdfisfsd
=======================================
  评论这张
 
阅读(1)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2018