zoukankan      html  css  js  c++  java
  • inline-block 元素之间的空白问题

    一、遇到的问题

    前些天写瀑布流布局的时候,发现明明计算好了宽度使得一行能放下三张图片,实际效果却总是放不下,图片会挤到下一行去。上图:

    image.png
    可以看到,我本来是想要两行图片,每一行是三张。结果现在第一行的图片跑到第二行去了。
    代码结构很简单:

    <li>
     <a></a>
     <a></a>
     <a></a>
    </li>
    <li>
     <a></a>
     <a></a>
     <a></a>
    </li>
    其中a标签设置了display:inline-block
    

    即使给a标签设置了padding:0;margin:0;图片之间仍然有小间隙。
    然后突然想到当初学习布局的时候,看过某大神提过空白的问题,结果因为没有实践,所以就忘了这码事了。

    二、举个简单的栗子分析问题

    <div style="border:1px red solid">
    <a style="background-color:pink;display:inline-block;20%;">1111</a>
    <a style="background-color:green;display:inline-block;80%;">2222</a>
    </div>
    

    结果:

    image.png
    我把粉色的宽度调小一点,19%。再试试!

    image.png
    发现这两个块之间的有个白色的小空隙了吧?为啥会有空白呢?

    因为:发明html的人是老外,老外使用空格作为单词之间的间隔的。inline-block 就像一个个的单词,刚刚的代码不是换行了吗?嗳~html还有一个空白字符压缩的特点,你换行也好,tab也好,多个空格也好,都会压缩成一个空格(还记得当年初学前端时遇到空格不生效只能用&nbsp;的时候吗)。
    现在知道问题的原因了,那么怎么解决呢?

    三、解决办法

    1、不换行

    <div style="border:1px red solid">
    <a style="background-color:pink;display:inline-block;20%;">1111</a><a 
    style="background-color:green;display:inline-block;80%;">2222</a>
    </div>
    

    缺点:这样写代码,太不优雅了,解读性太差。最重要的是运用模版的时候,比如我遇到问题的瀑布流,那都是只写一个元素,剩下的是通过循环遍历,自动添加的元素,根本没办法控制换不换行。
    2、给父元素设置font-size:0
    缺点:子元素如果需要字体的话,会需要重新在子元素添加fon-size的设置。但如果像我一样是图片不需要文字的话,就很完美了。
    3、不用inline-block改为float
    float是忽略空白符的,不过你的CSS布局可能要重新花一下心思,可能会涉及到清除浮动之类设置。
    4、word-spacing属性
    这个属性是用来设置单词之间的空白符的,针对IE7及以下浏览器hack,定义word-spacing为-1px,即可修复IE7及以下浏览器下顽固的残留1px间隙问题。
    根据你字体的大小,word-spacing的值应该相应的调整。并且不同浏览器的兼容性也不好,个人不是很推荐这种方式。如果hack的话,代码要写一大堆,感觉很麻烦。如果你非要用那我还能怎么办?当然是选择原谅你啦,甩给你一个参考链接:http://demo.doyoe.com/css/inline-block-space/
    5、white-space-collapse
    CSS3 Text Effects Module**》中就有了「white-space-collapse」属性,用来设置或者检索元素内包含的空白字符。有如下取值:

    • collapse:将一系列空白折叠为一个单独的字符(或者在某些情况下,没有字符)
    • preserve:阻止用户代理折叠空白,换行符保留为强制换行符。
    • preserve-breaks:该值将与「collapse」一样折叠空白字符,但保留换行符为强制换行符。
    • discard:抛弃所有空白。
      现在该属性被转移到《CSS Text Level 4》中,该规范中, 「white-space」分为两部分:white-space-collapse和text-wrap

    所以解决办法是:white-space-collapse:discard
    但是,由于该属性本身存在的诸多问题以及浏览器厂商没有及时跟进和实现,所以根本用不了。希望这个属性快快上架啦~~

  • 相关阅读:
    mysql查询不同用户(操作记录)的最新一条记录
    Mysql复制一条或多条记录并插入表|mysql从某表复制一条记录到另一张表
    获取股票数据接口(腾讯)
    uni-app微信相关开发问题记录:微信分享报错"包名不对,请检查包名是否与开放平台填写一致"、Android微信支付只能调起一次的问题、App微信登录与公众号微信登录的unionid不一致
    如何生成Android签名证书、安卓签名获取工具获取APP签名报错:NameNotFoundException: Signs is null的问题
    uniapp微信APP支付踩坑指南:报错errMsg: "requestPayment:fail errors"
    浅析判断一个APP是原生的还是H5页面
    uniapp nvue开发注意事项
    浅析Redis(整合Springboot、订阅发布、集群、雪崩、穿透、击穿)
    uniapp引入iconfont图标及解决真机中iconfont不显示的问题
  • 原文地址:https://www.cnblogs.com/cuncunjun/p/7390623.html
Copyright © 2011-2022 走看看