<!DOCTYPE > <html> <head> <title></title> <meta name="name" content="content"> <meta content="text/html; charset=utf-8" http-equiv="Content-Type"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <style type="text/css"> ul,li{ list-style: none; width: 400px; } .clearfix { zoom: 1; } .clearfix:after { content: ""; clear: both; display: block; } li{ padding: 0; position: relative; border:1px black solid; } li p{ margin: 0; padding: 0; display: inline-block; width: 16.667%; text-align: center; border:1px red solid; box-sizing:border-box; } </style> </head> <body> <ul> <li class="clearfix"> <p>第</p> <p>第二</p> <p>第三栏</p> <p>第四栏哈</p> <p>第四栏哈哈</p> <p>第四栏哈哈哈</p> </li> </ul> </body> </html>
解决方案1：给此元素的父标签设置font-size：0；给当前元素设置font-size：16；
li{
font-size: 0;
}
li p{
font-size: 14px;
}
解决方案2：p元素排版无间隔
<ul> <li class="clearfix"> <p>第</p><p>第二</p><p>第三栏</p><p>第四栏哈</p><p>第四栏哈哈</p><p>第四栏哈哈哈</p> </li> </ul>
