inline-block的几个问题(还没解决)

最新推荐文章于 2024-05-23 07:58:38 发布

猫不在

最新推荐文章于 2024-05-23 07:58:38 发布

阅读量442

点赞数

本文链接：https://blog.csdn.net/qq_33574890/article/details/77754609

版权

最近在练习代码的时候,遇到几个问题,但是没找到解决办法.详情如下

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title></title>
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
<style type="text/css">
*{margin: 0;padding: 0;}
a{display: inline-block;
margin: 1px;
border: 1px solid black;
text-decoration: none;
width: 120px;
height: 20px;
background: red;}
#sp{position: float;
float: left;
}
#ki{position: absolute;
top: 70px;
left: 70px;}
</style>
</head>
<body>
<div id="ki">
<div id="sp">
<a href="">第一个行内元素</a><a href="">第二个行内元素</a>
</div>
</div>
</body>
</html>

这个时候父元素和祖父元素一个是浮动定位,一个是绝对定位.结果是inline-block在同一行.

但是当两个都是绝对定位时,inline-block不在同一行.

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title></title>
    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
    <style type="text/css">
    	*{margin: 0;padding: 0;}
    	a{display: inline-block;
    	  margin: 1px;
    	  border: 1px solid black;
    	  text-decoration: none;
    	  width: 120px;
    	  height: 20px;
    	  background: red;}
    	  #sp{position: absolute; 
    	      
    	    }
    	   #ki{position: absolute;
    	    top: 70px;
    	    left: 70px;}
    </style>
</head>

<body>
	<div id="ki">
	<div id="sp">
		<a href="">第一个行内元素</a><a href="">第二个行内元素</a>
	</div>
	</div>
	
</body>

</html>

结果如下

并且inline-block之间有默认的间隙无法消除.我发现的问题是，把元素设置为inline-block元素后，会有默认间隙，这是由于元素换行的空白符导致的。我们有以下办法可以解决。

不过巧妙的利用换行符也有

猫不在

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
inline-block的几个问题(还没解决)

最近在练习代码的时候,遇到几个问题,但是没找到解决办法.详情如下*{margin: 0;padding: 0;}a{display: inline-block;margin: 1px;border: 1px solid black;text-decoration: none;width: 120px;height: 20px;back
复制链接

扫一扫