简单总结一下解决 添加 inline-block 后多出来的空隙

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了简单总结一下解决 添加 inline-block 后多出来的空隙相关的知识,希望对你有一定的参考价值。

添加 inline-block 后:

技术分享

查询、借鉴的原网址:http://www.zhangxinxu.com/wordpress/?p=2357

 

html 结构:

<ul class="ul" id="ul">
    <li><a href="#">Link one</a></li>
    <li><a href="#">Link two</a></li>
</ul>

 

一、直接源代码删除空格

如:

<ul class="ul" id="ul">
    <li><a href="#">Link one</a></li><!--
    --><li><a href="#">Link two</a></li>
</ul>

此方式,直接删除了,但个人觉得,若代码多,会显得乱。

 

二、使用margin负值

li 上添加 margin-left: 负值; ,这个不同浏览器需要负的数值不一样,使用起来不方便。

 

三、使用 font-size 大小控制

.ul {
    font-size:0;
}
.ul li a {
    font-size: 16px;
}

这个方法最简单的感觉,但是 好像 IE7 有些不支持 。( 尝试使用 *display: inline;  让其实现,IE7 不把持 display: inline-block; )

 

四、使用 letter-spacing  或 word-spacing 

.ul {
    letter-spacing: -4px;
}
.ul li a {
    letter-spacing:0;
}

 

 

以上是关于简单总结一下解决 添加 inline-block 后多出来的空隙的主要内容,如果未能解决你的问题,请参考以下文章

C#通过外部别名,解决DLL冲突问题

php 常用字符串函数总结

总结一下事务的原理

Maximum execution time of 30 seconds exceeded解决办法

初学C#,总结一下.sln和.csproj的区别

学号 2017-2018-20172309 《程序设计与数据结构》第4周学习总结