zoukankan      html  css  js  c++  java
  • 去掉inline-block元素默认间距的几种方法

    方法1:使用负margin值
    一般是-3px,部分浏览器可能不同,不太推荐使用。

    方法2:去掉多余空格
    将元素紧挨着写去掉多余空格,但降低了可读性。

    方法3:使用font-size:0
    在外层父元素加上font-size:0,内层再设置font-size覆盖。在谷歌浏览器上可能需要hack使其支持小字体。

    方法4:使用负值的word-spacing或letter-spacing,用的不多

    网上实例:

    下面展示的是YUI 3 CSS Grids 使用letter-spacingword-spacing去除格栅单元见间隔方法(注意,其针对的是block水平的元素,因此对IE8-浏览器做了hack处理):

    .yui3-g {
        letter-spacing: -0.31em; /* webkit */
        *letter-spacing: normal; /* IE < 8 重置 */
        word-spacing: -0.43em; /* IE < 8 && gecko */
    }
    
    .yui3-u {
        display: inline-block;
        zoom: 1; *display: inline; /* IE < 8: 伪造 inline-block */
        letter-spacing: normal;
        word-spacing: normal;
        vertical-align: top;
    }

    以下是一个名叫RayM的人提供的方法:

    li {
        display:inline-block;
        background: orange;
        padding:10px;
        word-spacing:0;
        }
    ul {
        100%;
        display:table;  /* 调教webkit*/
        word-spacing:-1em;
    }
    
    .nav li { *display:inline;}
  • 相关阅读:
    SharePoint Designer
    SharePoint Tricks
    树型dp(2019/1/19学习笔记) by csy
    2019/2/21测试(noip2015提高组day2
    loj刷题记录2019/2/20
    2019/2/16测试
    splay(水题)
    noip2016提高组day2
    2019/2/13测试(noip2016提高组day1原题)
    洛谷p1083借教室
  • 原文地址:https://www.cnblogs.com/raoyunxiao/p/4307259.html
Copyright © 2011-2022 走看看