使用inline设置水平导航栏有空白间距问题

问题现象

博主学习css练习写导航栏时遇到使用inline来制作水平导航栏时发现其之间会有一小部分间距,而使用浮动来做水平导航栏则没有此问题。
间距如下:
在这里插入图片描述
所以就去搜寻了一下,发现
原因是:标签之间的空格或者换行因为遵从代码规范书写时会有各种换行或空格的形式,如:
ul代码段
所以,最原始的办法就是换成一行:在这里插入图片描述
不过似乎有些不妥。所以我又搜寻了一些资料,里面总结的很全面:

http://www.zhangxinxu.com/wordpress/?p=2357
此链接by zhangxinxu from http://www.zhangxinxu.com

所以,我就用了 margin负值来取消间隔
在这里插入图片描述
解决之后:
在这里插入图片描述

补充:

还发现了一个很好的方法:
父元素添加{font-size:0},即将字体大小设为0,那么那个空白符也变成0px,从而消除空隙。

展开阅读全文

没有更多推荐了,返回首页