css - inline-block样式问题
本文介绍了css - inline-block样式问题的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
各位大神好，麻烦帮我看一下下面的代码，为什么两个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标签不换行
<header role="banner">
<div class="headTit hOne">
I can't stop
</div><div class="headTit hTwo">
Don't forget your heart
</div>
</header>解决办法二：父元素加font-size:0，子元素加上字体大小
header{
width:100%;
margin:0;
padding:0;
font-size:0;
}
.headTit{
display: inline-block;
width:50%;
font-size:16px;
}这篇关于css - inline-block样式问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
