为什么此处li标签内的p元素看起来独自撑开了一行

Question

我想用ul+li做一个三栏式布局，然后发现含有p、button等标签的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就在一行了，何解？请指教~

Answer 1

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

Answer 2

1. 给三个inline-block加上vertical-align:top;

2. 用float: left来布局

Answer 3

三栏布局通常不是用ul li实现的，建议你换一种实现方法，而不是进一步研究这种方法
1.最传统的表格布局
2.利用浮动
3.绝对定位
4.CSS3多列
5.flex布局
以上方法都可以实现，具体你可以自己写一下

Answer 4

为什么不用浮动布局呢， 要走捷径呀