zoukankan      html  css  js  c++  java
  • css解决display:inline-block;产生的缝隙(间隙)

    今天在做H5的水平滑动卡片时用到了display:inline-block;却发现处在同一水平线上的元素之间居然产生了缝隙,这很显然不是我想要的效果,所以我就换成了左浮动,这样缝隙的问题是解决了,但是需要设置父元素的宽度才能实现水平左右滚动,这样又增加了代码量,因为卡片的个数不固定,需要实时设置其父元素的宽度,就要用到js,所以代码量增加了,也不是最好的选择。看来最好的解决办法就是用到display:inline-block;了,于是缝隙的问题就出现了。代码如下:

    <!DOCTYPE html>
    <html>
    <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>document</title>
    <style>
    *{margin:0;padding:0;}
    .box{overflow-x:auto;background:#fff;white-space:nowrap;}
    .box span{display:inline-block;100px;height:30px;line-height:30px;text-align:center;background:#f00;color:#fff;}
    </style>
    </head>
    <body>
    <div class="box">
        <span>111</span>
        <span>111</span>
        <span>111</span>
        <span>111</span>
    </div>
    </body>
    </html>

    效果如下:

    这个缝隙很明显存在,据说这种表现是符合规范的应该有的表现,是换行造成的空白符导致的。但这效果很显然不是我们想要的,我们想要的缝隙是我们根据自己的实际需求而设置的边距。那么该如何消除产生的这个缝隙呢?办法有三:
    方法一:元素之间不换行,代码如下:

    <div class="box">
        <span>111</span><span>111</span><span>111</span><span>111</span>
    </div>

    效果如下:

    方法二:给其父元素设置font-size:0;给其自身设置实际需要的字号大小。不好的地方就是有些浏览器有设置最小字体,像chrome和opera,但是现在的chrome好像没有这个设置了,代码如下:

    **css:**
    .box{overflow-x:auto;background:#fff;white-space:nowrap;font-size:0;}
    .box span{display:inline-block;100px;height:30px;line-height:30px;text-align:center;background:#f00;color:#fff;font-size:14px;}
    
    **html**
    <div class="box">
        <span>111</span>
        <span>111</span>
        <span>111</span>
        <span>111</span>
    </div>

    效果如下:

    方法三: flex 布局

    <!DOCTYPE html>
    <html>
    
    	<head>
    		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    		<title>document</title>
    		<style>
    			* {
    				margin: 0;
    				padding: 0;
    			}
    			
    			.box {
    				display: flex;
    				justify-content:space-between;
    			}
    			
    			.box span {
    				 100px;
    				height: 30px;
    				line-height: 30px;
    				text-align: center;
    				background: #f00;
    				color: #fff;
    				font-size: 20px;
    			}
    		</style>
    	</head>
    
    	<body>
    		<div class="box">
    			<span>111</span>
    			<span>111</span>
    			<span>111</span>
    			<span>111</span>
    		</div>
    	</body>
    
    </html>
    

      

  • 相关阅读:
    Python2 to python3
    【python-HTMLTestRunner】生成HTMLTestRunner报告报错ERROR 'ascii' codec can't decode byte 0xe5 in position 0: ordinal not in range(128)
    【python-HTMLTestRunner】HTMLTestRunner测试报告中文乱码问题解决
    【python-ini】python读写ini文件
    【python-字典】判断python字典中key是否存在的
    【python 字典、json】python字典和Json的相互转换
    【python3+request】python3+requests接口自动化测试框架实例详解教程
    【python-crypto】导入crypto包失败的情况,怎么处理
    【python-excel】Selenium+python自动化之读取Excel数据(xlrd)
    【滚动条】Selenium+python自动化-JS处理滚动条
  • 原文地址:https://www.cnblogs.com/libin-1/p/6137114.html
Copyright © 2011-2022 走看看