各位大神好,麻烦帮我看一下下面的代码,为什么两个div设置了display:inline-block后不在同一行?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Examples</title>
<style type="text/css">
html{
padding:0;
}
body{
margin:0;
padding:0;
}
h1,h2,h3,h4,h5,h6,div{
margin:0;
padding:0;
}
header{
width:100%;
margin:0;
padding:0;
}
.headTit{
display: inline-block;
width:50%;
}
</style>
</head>
<body>
<header role="banner">
<div class="headTit hOne">
I can't stop
</div>
<div class="headTit hTwo">
Don't forget your heart
</div>
</header>
</body>
</html>
因为inline-block如果标签换行的话会有4像素的间隔,而且你设置了宽度50%,所以就会掉下去了。
解决办法一:HTML标签不换行
解决办法二:父元素加font-size:0,子元素加上字体大小