在布局的时候,我们经常会遇到这样的问题:文字之间有一点间距,可是打空格又不够,补转义空格 又要补很多,因为一个 占的位置实在太短了。还有时候,经常会遇到的问题,如下:
============================
物品名称:dfasisd
详细参数:dasi wfso
价格:sdfisfsd
============================
我们遇到这样的地方,前两个左边都是四个字"物品名称","详细参数",而最后一个价格却只有两个字,当然我们可以直接按上面的格式写出来,可是这样对不齐,不好看。如果要对齐,我们可以在价格中间不停地补 直到和上面对齐,可是这种方法也不是很好用,因为中文和英文占的字节数不一样,很有可能怎么补 最后也还是对不齐,差几象素。那么,我们还有一种做法,就是这样:
<li><span>物品名称:</span>dfasisd</li>
<li><span>详细参数:</span>dasi wfso</li>
<li><span>价格:</span>sdfisfsd</li>
li span{float:left;80px;}
给这几个左边的文字包一个span,设置为左浮动,然后给定一个宽度,这样,就会让冒号右边的文字左对齐。这当然是个办法,可是,还有一个更简单的办法,就是使用空格!
注意,这个空格不是一般的空格,而是圆角的空格,把输入法设置成圆角,再输入空格,就会把这个空格当做中文来用了,这个时候输入的空格就已经不再是正常的空格,它占的位置是一个中文的宽度,而且已经不受"输入多个连续空格只按一个空格显示"的约束了!我们可以在价格中间连续输入两个空格就可以轻松让他们对齐。而我们上面一开始提到的一段比普通空格长,又不算太长的间距,也可以通过连续输入适量空格解决了。唯一有点担心的就是程序员在配程序时,会不会把这些“空格”理解为你布局时留白的失误,而好心地优化山删除掉了,哈。
效果如下:
=======================================
物品名称:dfasisd
详细参数:dasi wfso
价 格:sdfisfsd
=======================================