最近在练习代码的时候,遇到几个问题,但是没找到解决办法.详情如下
<!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元素后，会有默认间隙，这是由于元素换行的空白符导致的。我们有以下办法可以解决。
不过巧妙的利用换行符也有
转载请注明原文地址: https://www.6miu.com/read-59484.html
