display:inline-block空隙解决方法及原因

田

发布于 2021-11-08 11:31:55

3380

发布于 2021-11-08 11:31:55

文章被收录于专栏：IT杂症

同学在做菜单的时候可能会用ul>li>a来实现横向的菜单；但在做的时候发现菜单与菜单直接有空隙；个人感觉应该是spacing之类的东西引起的根本原因。解决方案有以下几种：可以访问张鑫旭的空间看分析，这里不再赘述；穿越门：点我穿越

解决方案

标签不闭合法不推荐
字体变0法还行
margin负值法
“整体化一”法，将源代码压缩至一行
代码注释法插入
letter-spacing
word-spacing
吸星大法现成的解决方案

<!--方法①-->
.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;
}
<!--方法②-->
li {
    display:inline-block;
    background: orange;
    padding:10px;
    word-spacing:0;
    }
ul {
    width:100%;
    display:table;  /* 调教webkit*/
    word-spacing:-1em;
}

.nav li { *display:inline;}

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2015年12月22日，如有侵权请联系 cloudcommunity@tencent.com 删除

spacing