zoukankan      html  css  js  c++  java
  • display:inline-block的div 与 display:block的div之间有间隔问题(div与div之间有间隔的可能性)

    首先看一下我出现的问题如下图:


    如上图所示,我的导航栏是由三部分组成的,三部分样式如下:

    .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之后需要把两个元素之间加上<!-- -->要不然就会元素之间就会出现空格呢?

  • 相关阅读:
    github提交代码403
    针对七牛含有特殊字符的文件名,对特殊字符编码处理
    去除字符串所有空格
    按关键词匹配度排序
    服务器监控-Zabbix
    数据同步
    字符串-占位符
    Redis序列化
    Redis监听回调
    时间计算
  • 原文地址:https://www.cnblogs.com/hiveme/p/8194826.html
Copyright © 2011-2022 走看看