• 布局小技巧 空格的妙用


        在布局的时候,我们经常会遇到这样的问题:文字之间有一点间距,可是打空格又不够,补转义空格 又要补很多,因为一个 占的位置实在太短了。还有时候,经常会遇到的问题,如下:
    ============================
    物品名称: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
    =======================================
  • 相关阅读:
    输出函数
    curl
    页眉的章名和章名不统一
    水平柱状图
    目录和正文的页码生成
    protobuf的使用
    yarn vue安装
    nvm node的安装
    win安装postman
    机器码
  • 原文地址:https://www.cnblogs.com/cly84920/p/4427123.html
Copyright © 2020-2023  润新知