0

我想用ul+li做一个三栏式布局,然后发现含有pbutton等标签的li元素相对其中没有元素的li元素下移了一部分,然后做了下测试,测试代码如下:

html:

<ul>
    <li class="left">
        <p style="display: inline-block;">1</p>
    </li>
    <li class="center"></li>
    <li class="right"></li>
</ul>

css:

*{
    padding: 0;
    margin: 0;
    border: none;
    box-sizing: border-box;
}
html{
    font-family: "微软雅黑";
}
body{
}
ul{
    font-size: 0;
    margin: 0 auto;
    width: 1000px;
}
li{
    display: inline-block;
    text-align: center;
}
.left,.center,.right{
    width:300px;
    height:300px;
}
.left{
    background-color: #999;
}
.center{
    background-color: #ccc;
}
.right{
    background-color: #eee;
}

显示结果:

看起来就像一个p元素占了一行,开始以为是p元素是display:block的原因,但我给p加display:inline-block属性后,依然如此,去掉p元素后,三个li就在一行了,何解?请指教~

查看全部 4 个回答

1

已采纳

我来给你说说为什么吧。因为inline-block的vertical-align 属性默认是baseline(基线,如果这个也不懂,那就自己百度,要展开就太多了),在一行的inline-block需要基线对齐,而基准就是正常流中最后一个line box的基线,如果这个元素是空的,没有内容,也就是你上面写的那样,那么这个基线就是最这个元素的margin-bottom线;如果这个元素不为空,那么这个元素的基线就是元素里面内容最后一行文字的基线;所以这就会造成第一个和第三个错行的感觉,其实他两是为了基线对齐。所以最简单的解决方案就是为Li添加vertical-align: top;