问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

inline-block样式问题

头像
第一个小笨笨
    1534

    各位大神好，麻烦帮我看一下下面的代码，为什么两个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>
    csshtml
    阅读 3.4k
    2 个回答
    得票最新
    头像
    PiLee
      1.5k1110
      ✓ 已被采纳

      因为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;
}
      头像
      pupuk
        43
        新手上路，请多包涵

        楼上的答案说的非常有道理
        两个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分别设置字体大小。

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