设置多个inline-block在一行引发的的问题

最新推荐文章于 2020-12-02 22:29:00 发布

tomrsun

最新推荐文章于 2020-12-02 22:29:00 发布

阅读量686

点赞数

文章标签： css html

本文链接：https://blog.csdn.net/tomrsun/article/details/107717547

版权

先看一段代码：

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>

	<body>
		<div class="f-box">

			<span class="sub-box1">
				
			</span>
			<span class="sub-box2">
				
			</span>
			<span class="sub-box3">
				
			</span>
		</div>
	</body>
	<style type="text/css">
		.f-box {
			width: 440px;
			height: 34px;
			background-color: blue;
			border: 1px solid #ccc;
		}
		
		.sub-box1 {
			display: inline-block;
			width: 300px;
			height: 34px;
			background-color: red;
		}
		
		.sub-box2 {
			display: inline-block;
			width: 50px;
			height: 34px;
			background-color: green;
		}
		
		.sub-box3 {
			display: inline-block;
			width: 90px;
			height: 34px;
			background-color: pink;
		}
	</style>

</html>

按道理说三个span应该在一行显示，但是我得到的是这样的：

居然左边都有间隙，而且是5px,后来查询发现，设置inline-block后，每个span之间会有空格，所以写在一行就不会了

<span class="sub-box1"></span><span class="sub-box2"></span><span class="sub-box3"></span>

在这里插入图片描述
居然真的在一行了，但是如果我们直接这样写其实是不利阅读的，所以我想，如果在他们的父级盒子加上font-size:0; 是不是就可以把所有字符都变成0呢

.f-box {
			width: 440px;
			height: 34px;
			background-color: blue;
			border: 1px solid #ccc;
			font-size: 0;
		}

在这里插入图片描述
果然可以，但是我想设置浮动可以不呢

.sub-box1 {
			display: inline-block;
			width: 300px;
			height: 34px;
			background-color: red;
		}
		
		.sub-box2 {
			display: inline-block;
			width: 50px;
			height: 34px;
			background-color: green;
			float: right;
		}
		
		.sub-box3 {
			display: inline-block;
			width: 90px;
			height: 34px;
			background-color: pink;
			float: right;
		}

在这里插入图片描述
果然，虽然位置变了，但是换一下span标签的位置就可以解决了，因为浮动脱离了文档流，所以自然不会受空格符的影响了；
但是我的需求是左边一个input，右边一个span按钮

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>

	<body>
		<div class="f-box">

			<input type="" name="" id="" value="" />
			<span class="sub-box3"></span>
		</div>
	</body>
	<style type="text/css">
		.f-box {
			width: 440px;
			height: 34px;
			background-color: blue;
			border: 1px solid #ccc;
			
		}
		.f-box input{
			width: 390px;
			height: 34px;
			background-color: pink;
			border: none;
			padding: 0;
			outline: none;
		}
		.sub-box3 {
			display: inline-block;
			width: 50px;
			height: 34px;
			background-color: red;
		}
		
		
	</style>

</html>

在这里插入图片描述
不出所料，那我把宽度设置小一点呢，少5个像素

比inline-block还离谱，居然还有向下的间隙，又通过查询发现由于设置span为line-block,所以span的baseline就是这个元素margin下边界的位置

.f-box {
			width: 440px;
			height: 34px;
			background-color: blue;
			border: 1px solid #ccc;
			font-size: 0;
		}
		.f-box input{
			width: 390px;
			height: 34px;
			background-color: pink;
			border: none;
			padding: 0;
			outline: none;
		}
		.sub-box3 {
			display: inline-block;
			width: 50px;
			height: 34px;
			background-color: red;
			vertical-align: top;
		}