我想用ul+li做一個(gè)三欄式布局，然后發(fā)現(xiàn)含有p、button等標(biāo)簽的li元素相對(duì)其中沒有元素的li元素下移了一部分，然后做了下測(cè)試，測(cè)試代碼如下：

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;
}

顯示結(jié)果：

看起來(lái)就像一個(gè)p元素占了一行，開始以為是p元素是display:block的原因，但我給p加display:inline-block屬性后，依然如此，去掉p元素后，三個(gè)li就在一行了，何解？請(qǐng)指教~