inline-block特性及常见问题

版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/cbkting/article/details/87575224


代码运行的浏览器:IE浏览器(IE 11.0)、谷歌浏览器(Google Chrome 版本 61.0.3163.100)、火狐浏览器(Firefox 56.0.1 )、欧朋(Opera 48.0.2685.50)

inline-block 特性及常见问题

inline-block特性:

  • 块在一行显示;
  • 行内属性标签支持宽高;
  • 没有宽度的时候内容撑开宽度
  • 代码空格/换行被解析;

inline-block如何去除缝隙?

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>inline-block元素之间的空隙的消除方法</title>
		<style>
			.demo{
				padding: .5em 1em;
				background-color:#53c9df;
				margin:10px;
			}
			img{
				width:100px;
				height:100px;
			}
			a{
				display: inline-block;
				padding: .5em 1em;
				background-color: #cad5eb;
			}

		</style>
	</head>
	<body>

		<h2>问题,两者之间出现间隙:</h2>
		<div class="demo">
			<img src="20190218015729.png"/>
			<img src="20190218015821.png"/>
			<a href="##">好奇</a>
			<a href="##">问题</a>
			<a href="##">结果</a>
		</div>

	</body>
</html>

运作结果:
在这里插入图片描述

解决方法:

1、删去元素之间的空白

元素间留白间距出现的原因就是标签段之间的空格,因此,去掉HTML中的空格,自然间距就木有了。

<!--写法1:-->
<div class="demo">
    <img src="20190218015729.png"/><img src="20190218015821.png"/><span>好奇</span><sapn>问题</sapn><apan>结果</apan>
</div>

注意: 考虑到代码可读性,显然连成一行的写法是不可取的,我们可以:

<!--写法2:-->
<div class="demo">
    <img src="20190218015729.png"/><img src="20190218015821.png"/><a href="###">
    好奇</a><a href="###">
    问题</a><a href="###">
    结果</a>
</div>

<!--写法3:-->
<div class="demo">
    <img src="20190218015729.png"/
    ><img src="20190218015821.png"/
    ><span>好奇</span
    ><span>问题</span
    ><pan>结果</pan>
</div>
<!--写法4:-->
<div class="demo">
    <img src="20190218015729.png"/><!--
    --><img src="20190218015821.png"/><!--
    --><span>好奇</span><!--
    --><sapn>问题</sapn><!--
    --><apan>结果</apan>
</div>

运行结果:

  • 写法1:
    在这里插入图片描述

  • 写法2:
    在这里插入图片描述

  • 写法3:
    在这里插入图片描述

  • 写法4:
    在这里插入图片描述

2、让闭合标签

示例1,如下处理:

//CSS 代码:
<style>
	.space a{
            display: inline-block;
            padding:.5em 1em;
            background-color: #cad5eb;
	}
</style>

//html 代码:
<div class="space">
    <a href="##">好奇
    <a href="##">问题
    <a href="##">结果</a>
</div>

注意: 为了向下兼容IE6/IE7等浏览器,最后一个列表的标签的结束(闭合)标签不能丢。

示例2,在HTML5中,我们直接:

//CSS 代码:
<style>
	.space a{
            display: inline-block;
            padding:.5em 1em;
            background-color: #cad5eb;
	}
</style>

//html 代码:
<div class="space">
    <a href="##">好奇
    <a href="##">问题
    <a href="##">结果
</div>

示例1和示例2,在浏览器们运行结果一致:
在这里插入图片描述

3、使用font-size:0

在父元素中设置font-size:0,然后在子元素上重置正确的font-size。
缺点: inline-block元素必须设定字体,不然行内元素中的字体不不显示。
类似下面的代码:

.space {
    font-size: 0;
}
.space a {
    font-size: 12px;
}

这个方法,基本上可以解决大部分浏览器下inline-block元素之间的间距(IE7等浏览器有时候会有1像素的间距)。不过有个浏览器,就是Chrome, 其默认有最小字体大小限制,因为,考虑到兼容性,我们还需要添加:
类似下面的代码:

.space {
    font-size: 0;
    -webkit-text-size-adjust:none;
}

4、使用margin-right负值

缺点: 元素之间间距的大小与上下文字体大小相关;并且同一大小的字体,元素之间的间距在不同浏览器下是不一样的,如:font-size:16px时,Chrome下元素之间的间距为8px,而Firefox下元素之间的间距为4px。所以不同浏览器下margin-right的负值是不一样的,因此这个方法不通用。

注意: 当marigin-right使用相对单位em来表示时,Chrome下可以正常去除间距,而Firefox下元素之间有重叠。

5、为inline-block元素添加样式float:left

6、使用display:table和word-spacing(最优的方法)

.box{
    display:table;  /* 调教webkit*/
    word-spacing:-1em;/*其他浏览器*/
}

7、使用letter-spacing

**优点:**因为使用了letter-spacing相对单位em表示距离,所以不需要根据字体大小改变代码来去除元素间距。

.box{
     letter-spacing: -0.5em;
}
.box div{
     letter-spacing: 0;
}

8、使用word-spacing

**优点:**因为使用了word-spacing相对单位em表示距离,所以不需要根据字体大小改变代码来去除元素间距。

.box{
   word-spacing: -0.5em;
}

一个是字符间距(letter-spacing),一个是单词间距(word-spacing),大同小异。据我测试,word-spacing的负值只要大到一定程度,其兼容性上的差异就可以被忽略。因为,貌似,word-spacing即使负值很大,也不会发生重叠。
(一定要亲自实际操作)除了IE外,其他如果您使用Chrome浏览器,可能看到的是间距依旧存在。确实是有该问题,原因我是不清楚,不过我知道,可以添加display: table;或display:inline-table;让Chrome浏览器也变得乖巧。

.space {
    display: inline-table;
    word-spacing: -6px;
}

9、其他成品方法

下面展示的是YUI 3 CSS Grids 使用letter-spacing和word-spacing去除格栅单元见间隔方法(注意,其针对的是block水平的元素,因此对IE8-浏览器做了hack处理):

.yui3-g {
    letter-spacing: -0.31em; /* webkit */
    *letter-spacing: normal; /* IE < 8 重置 */
    word-spacing: -0.43em; /* IE < 8 && gecko */
}
.yui3-u {
    display: inline-block;
    zoom: 1; *display: inline; /* IE < 8: 伪造 inline-block */
    letter-spacing: normal;
    word-spacing: normal;
    vertical-align: top;
}

以下是一个名叫RayM的人提供的方法:

li {
    display:inline-block;
    background: orange;
    padding:10px;
    word-spacing:0;
    }
ul {
    width:100%;
    display:table;  /* 调教webkit*/
    word-spacing:-1em;
}
.nav li { *display:inline;}

也就是上面一系列CSS方法的组组合合。

高度不同,如何顶端对齐?

解答:添加:vertical-align:top; (关于vertical-align属性,上网查询)

CSS代码:

div{
height: 100px;
width: 200px;
background-color: pink;
text-align: center;
}
span{
display:inline-block;
vertical-align: middle;
line-height: 20px;
width: 100px;
}
i{
display: inline-block;
height: 100%;
vertical-align: middle;
}

HTML代码:

<div>
<i></i><span>我是特别长的特别长的特别长的特别长的多行文字</span>
</div>

参考资料:

展开阅读全文

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