zoukankan      html  css  js  c++  java
  • 去除inline-block元素间的空隙

    总体来时可分为两种方法,一种是改变html结构法,另一种是css法。

    先说第一种,比如下面这段代码:

    <ol>
       <li>首页</li>
       <li>关于我们</li>
       <li>联系我们</li>
       <li>加入我们</li>
    </ol>

    假设 li 是 inline-block元素,则 li 间会出现讨厌的空隙,这时我们可以换个写法:

    <ol>
       <li>首页</li
       ><li>关于我们</li
       ><li>联系我们</li
       ><li>加入我们</li>
    </ol><ol>
       <li>
       首页</li><li>
       关于我们</li><li>
       联系我们</li><li>
       加入我们</li>
    </ol><ol>
       <li>首页</li><!--
       --><li>关于我们</li><!--
       --><li>联系我们</li><!--
       --><li>加入我们</li>
    </ol>

    以上三种写法都是可以的,总之就是避免让 </li>与<li>之间出现书面上的空格。

    还有一种写法是去除闭合标签,如:

    <ol>
       <li>首页
       <li>关于我们
       <li>联系我们
       <li>加入我们
    </ol>

    这种写法因为不符合html规范,所以还是避免使用为好

    第二种是css解决方法。思路是把inline-block元素的父元素的font-size设为0,letter-spacing和word-spacing设为负数,然后再在inline-block元素中把这几个值恢复正常即可。

    ul{
      font-size:0;
      letter-spacing:-4px; /*实际情况下 -4这个值可能还要调整*/
      word-spacing:-4px;   /*实际情况下 -4这个值可能还要调整*/   
    }
    ul li{
      display:inline-bolck;
      zoom:1;
      font-size:12px;
      letter-spacing:normal;
      word-spacing:normal;
    }
  • 相关阅读:
    线程的实现方式
    实现一个拷贝文件的工具类,要使用字符流还是字节流
    String&&StringBuilder&&StringBuffer
    面向对象的特征
    索引的选择
    TCP之Nagle算法&&延迟ACK
    通用套接字选项和TCP套接字选项
    TCP之非阻塞connect和accept
    TCP之种种连接异常
    TCP之listen&backlog
  • 原文地址:https://www.cnblogs.com/Hale-Proh/p/7009775.html
Copyright © 2011-2022 走看看