inline-block为什么不能对齐

金富翁
  • 366
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scale=no/">
        <title>allcourse</title>
        <link href="css/bootstrap.min.css" rel="stylesheet" />
        <!--link标签中不能用src -->
        <link herf="bootstrap-3.3.5-dist/css/bootstrap-theme.min.css" rel="stylesheet" />
        <!--[if it IE 9]
            <script src="bootstrap-3.3.5-dist/js/html5shiv.min.css"></script>
            <script src="bootstrap-3.3.5-dist/js/respond.min.css"></script>
        <![endif]-->
        <style type="text/css">
            .left{width: 30%;display: inline-block;}
            .right{display: inline-block;}
        </style>
    </head>
    <body>
        <div class="left">
            <div class="">企业管理</div>
            <div class="">市场营销</div>
            <div class="">互联网</div>
            <div class="">能力素质</div>
            <div class="">大学生</div>
            <div class="">职业技能</div>
        </div>
        <div class="right">
            <div>
                <p>企业战略</p>
                <p>管理技能</p>
            </div>
            <div>
                <p>人力资源</p>
                <p>生产物采</p>
            </div>
            <div>
                <p>研发</p>
                <p>管理项目</p>
            </div>
        </div>
        <script src="js/jquery-3.1.0.js"></script>
        <script src="js/bootstrap.min.js"></script>
    </body>
</html>

请问左边的那串文字为何跑了下来而没有定在左上角

回复
阅读 7.2k
7 个回答

基线对齐问题,加上vertical-align: top;

vertical-line:top;
使用inline-block元素的时候要注意这一点

建议改用浮动。两个inline-block的元素中间会根据浏览器的不同,会存在8px左右的空白,就是常说的浏览器兼容性,不利于排版。所以类似这样的并排元素,还是使用float更好。

vertical-align:top;//顶部对齐
vertical-align:middle;//居中对齐
vertical-align:bottom;//底部对齐

将原来的

<div class="left">
        <div class="">企业管理</div>
        <div class="">市场营销</div>
        <div class="">互联网</div>
        <div class="">能力素质</div>
        <div class="">大学生</div>
        <div class="">职业技能</div>
    </div>
    <div class="right">
        <div>
            <p>企业战略</p>
            <p>管理技能</p>
        </div>
        <div>
            <p>人力资源</p>
            <p>生产物采</p>
        </div>
        <div>
            <p>研发</p>
            <p>管理项目</p>
        </div>
</div>

改成

    <div class="left">
        <div class="">
        企业管理</div><div class="">
        市场营销</div><div class="">
        互联网</div><div class="">
        能力素质</div><div class="">
        大学生</div><div class="">
        职业技能</div>
    </div>
    <div class="right">
        <div>
            <p>企业战略</p>
            <p>管理技能</p>
        </div><div>
            <p>人力资源</p>
            <p>生产物采</p>
        </div><div>
            <p>研发</p>
            <p>管理项目</p>
        </div>
</div>

问题解决

swimly
  • 2
新手上路,请多包涵

在父级加上font–size:0,可以去掉4px问题!

使用inline-block布局会出现间隙问题。网上有很多解决方案,可以百度: 去除inline-block间隙,就可以解决你的问题了。

宣传栏