【小5聊】css布局html页面之inline-block布局错位解决方法

86 阅读 0 评论 57 点赞

我是靠谱客的博主粗暴薯片，这篇文章主要介绍【小5聊】css布局html页面之inline-block布局错位解决方法，现在分享给大家，希望可以做个参考。

场景如下

1、编写css和html代码如下

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div class="" style="padding:10px;">
    <div style="display:inline-block;">
        <div style="float:left;height:35px;line-height:35px;padding:0 10px;background:#ccc;border:1px solid #ccc;">
            <label>one</label>
        </div>
        <div style="float:left;height:35px;line-height:35px;padding:0 10px;background:#eee;border:1px solid #ccc;">
            <span class="">two</span>
        </div>
    </div>

    <div style="display:inline-block;height:35px;line-height:35px;padding:0 10px;border:1px solid #0ccdff;background:#0ccdff;color:#fff;cursor:pointer;">
        <span>按钮</span>
    </div>
</div>

2、页面效果，两个行内元素出现错位

3、解决方法：使用垂直对齐的样式，vertical-align:middle

4、知道解决方法，但也要知道为什么会出现，这样能够加深理解，快速解决问题

1）把第一个inline-block内部div的float浮动去掉，效果如下

第二个inline-block会和第一个inline-block内部的最后一个div对齐

猜想，如果我只给第二个inline-block设置垂直水平顶部对齐vertical-align:top，那么有按钮则会和one对齐

5、因此，以上解决方法，只需要给按钮这个div设置垂直水平顶部对齐vertical-align:top样式即可

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
    <div class="" style="padding:10px;">
        <div style="display:inline-block;">
            <div style="float:left;height:35px;line-height:35px;padding:0 10px;background:#ccc;border:1px solid #ccc;">
                <label>one</label>
            </div>
            <div style="float:left;height:35px;line-height:35px;padding:0 10px;background:#eee;border:1px solid #ccc;">
                <span class="">two</span>
            </div>
        </div>

        <div style="display:inline-block;height:35px;line-height:35px;padding:0 10px;border:1px solid #0ccdff;background:#0ccdff;color:#fff;cursor:pointer;vertical-align: top;">
            <span>按钮</span>
        </div>
    </div>