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>

  • 相关阅读:
    requireJS搭建
    html启动本地.exe文件
    自定义input[type="checkbox"]的样式
    使用rem单位时css sprites的坑
    visibility API
    css动画
    去除ios端输入框的弹出
    *java类的生命周期
    处理高并发,防止库存超卖
    java注解的使用
  • 原文地址:https://www.cnblogs.com/12606huchao/p/4871846.html
Copyright © 2011-2022 走看看