zoukankan      html  css  js  c++  java
  • 去掉inline-block元素间隙的几种方法

    <!doctype html>
    <html>
    <head>
    <meta charset="UTF-8">
    <meta name="Author" content="胡超">
    <title>super胡</title>
    <style>

    #a1 {
    list-style: none ;
    background: green;
    text-align: center;
    padding:10px;
    }
    #a1 li {
    display: inline-block;
    background: orange;

    }
    #a2 {
    list-style: none ;
    background: green;
    text-align: center;
    padding:10px;
    }
    #a2 li {
    display: inline-block;
    background: orange;

    }
    #a3 {
    list-style: none ;
    background: green;
    text-align: center;
    padding:10px;
    font-size:0px;/*父元素设置 font-size:0px; 子元素需要重新设置*/
    }
    #a3 li {
    display: inline-block;
    background: orange;
    font-size:16px;
    }
    #a4 {
    list-style: none ;
    background: green;
    text-align: center;
    padding:10px;
    }
    #a4 li {
    display: inline-block;
    background: orange;

    }


    </style>
    </head>
    <body>
    <ul id="a1">
    <li>item1
    </li><!--
    --><li>item2 <!--注释法作为了解 -->
    </li><li>item3
    </li><li>item4
    </li><li>item5
    </li>
    </ul>

    <ul id="a2">
    <li>item1
    </li><li>item2<!--让</li><li>之间没有空隙-->
    </li><li>item3
    </li><li>item4
    </li><li>item5
    </li>
    </ul>
    <ul id="a3">
    <li>item1 <!--父元素设置 font-size:0px; 子元素需要重新设置-->
    </li>
    <li>item2
    </li>
    <li>item3
    </li>
    <li>item4
    </li>
    <li>item5
    </li>
    </ul>
    <ul id="a4">
    <li>item1
    <li>item2
    <li>item3
    <li>item4
    <li>item5
    </li><!--去掉结束标签-->
    </ul>
    </body>
    </html>

  • 相关阅读:
    windows2003 如何配置ASP网站
    如何在asp.net中获取GridView隐藏列的值?
    GridView.RowCommand 事件中获取当前行的信息
    模块导入导出
    API / DOM
    HTTP(搁置)
    npm
    链接(跳转)<routerlink> 和 路由实例Router
    elementui
    vuex
  • 原文地址:https://www.cnblogs.com/12606huchao/p/4871846.html
Copyright © 2011-2022 走看看