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;
}

【热门文章】