zoukankan      html  css  js  c++  java
  • display:inline-block空格的解决办法

    如图当我们使用display:inline-block时元素之间会有空格。

    首先,先了解下display:inline-block的兼容性问题:

    下面我整理了几种解决的办法,已经在Chrome,Firefox,IE上测试:

    1.标签之间无空隙

    <div class="div" style="background:#3f7ccf;">1</div><div class="div" style="background:#dcd9c0;">2</div><div class="div" style="background:#ffed53;">3</div>

    2.标签使用同一个关闭标签(标签名相同)

    <style>
      div{padding:0;margin:0;border:0;}
      .box{height:100px;border:1px solid red;  }
      .div{width:100px;height:100px;display:inline-block;}
      .div{*display:inline;zoom:1;}
    </style>
    <div class="box">
      <a class="div" style="background:#3f7ccf;">1
      <a class="div" style="background:#dcd9c0;">2
      <a class="div" style="background:#ffed53;">3</a>
    </div>

    注意:经测试,使用div标签不能实现。

    3.注释将元素之间的间隔去掉

    <div class="box">
      <div class="div" style="background:#3f7ccf;">1</div><!--
      --><div class="div" style="background:#dcd9c0;">2</div><!--
      --><div class="div" style="background:#ffed53;">3</div>
    </div>

    4.父元素设置font-size:0;

    <style>
      div{padding:0;margin:0;border:0;}
      .box{height:100px;border:1px solid red;font-size:0;}
      .div{width:100px;height:100px;display:inline-block;}
      .div{*display:inline;zoom:1;}
    </style>
    <div class="box">
      <div class="div" style="background:#3f7ccf;">1</div>
      <div class="div" style="background:#dcd9c0;">2</div>
      <div class="div" style="background:#ffed53;">3</div>
    </div>

    5.父元素设置letter-spacing:0;

    <style>
      div{padding:0;margin:0;border:0;}
      .box{height:100px;border:1px solid red;letter-spacing:-10px;}
      .div{width:100px;height:100px;display:inline-block;}
      .div{*display:inline;zoom:1;}
    </style>
    <div class="box">
      <div class="div" style="background:#3f7ccf;">1</div>
      <div class="div" style="background:#dcd9c0;">2</div>
      <div class="div" style="background:#ffed53;">3</div>
    </div>

    当.div元素标签改成行内元素或行内块元素时,IE6、7存在兼容性问题,会遮盖部分元素

    以上说的都是水平方向上元素间的空隙解决方法,对于上下间距,可以使用vertical-align属性来设置

  • 相关阅读:
    (转)fabric 一个链码如何调用另一个链码
    (转)Java静态内部类的实例化问题
    解决Linux 下 root用户删除文件提示:Operation not permitted
    Mybatis Update操作返回值问题
    mybatis {arg0} 与 {0}
    乐观锁 -业务判断 解决高并发问题
    (转)漫谈MySql中的事务
    (转)ThreadLocal-面试必问深度解析
    (转)Thread的中断机制(interrupt)
    多线程
  • 原文地址:https://www.cnblogs.com/zmr2520/p/6015953.html
Copyright © 2011-2022 走看看