固定width但是有间隔

<!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>

posted on 2017-07-03 16:45 Newbie_小白阅读(122) 评论(0) 编辑收藏举报