最近在练习代码的时候,遇到几个问题,但是没找到解决办法.详情如下
<!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>
<!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元素后,会有默认间隙,这是由于元素换行的空白符导致的。我们有以下办法可以解决。
不过巧妙的利用换行符也有