zoukankan      html  css  js  c++  java
  • 固定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>

     

  • 相关阅读:
    token
    id
    vim
    http_proxy
    brew
    认证
    go
    linux 磁盘管理
    vmware
    vmware fusion
  • 原文地址:https://www.cnblogs.com/theWayToAce/p/7111869.html
Copyright © 2011-2022 走看看