首先看一下我出现的问题如下图:
如上图所示,我的导航栏是由三部分组成的,三部分样式如下:
.logo{ /*红框*/ position: relative; display: inline-block; 15%; line-height: 80px; vertical-align: middle; }
.nav{ /* 导航*/ position: relative; display: inline-block; top:0px; 70%; line-height: 80px; text-align: center; overflow: hidden; vertical-align: middle; }
.loginbar{ /* 登录框*/ position: relative; display: inline-block; 14%; line-height: 80px; vertical-align: middle; }下面的div则是display:block的,这就比较尴尬了,两者都没有设置border,padding,margin也都是0,怎么会有间隙呢
解决方案就是把上面三个属性都加上 height:80px;
至于为什么不设置height会影响两者之间的间距,原理还是没有弄懂,有大神可以帮忙解释下。
还有为什么display:inline-block之后需要把两个元素之间加上<!-- -->要不然就会元素之间就会出现空格呢?