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>
阅读 3.4k
2 个回答

因为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;
}
新手上路,请多包涵

楼上的答案说的非常有道理
两个div之间如果有空格或者换行符,这两个inline-block的div之间有4个像素的间隔
我将每个div的宽度从50%减少一些,同时添加背景颜色
.headTit{

display: inline-block;
width:45%;
background-color: #fcc;

}
图片描述

因此楼上说的1方法就是,删除两个div之间的空白字符(包括换行和空格)

这个理解了,就容易理解方法2了。
父元素设置font-size:0 可以让容器里面的空白字符(换行符或空格)宽度为零
但同时也会让div1,div2里面的文字高度为零,
所以再分别对div1,div2分别设置字体大小。

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题