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

    为什么会产生间隙?

    由于编写代码时的美观和可读性,在代码中添加回车空格而产生的间隙。

    html代码:

    复制代码
    <ul class="container">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
    
    <style>
        .container li{
            display: inline-block;
            100px;
            height:100px;
            border:1px solid #ccc;
        }
    </style>
    复制代码

    方法一:

    调整html代码,缺点降低了可读性,如下

    复制代码
    <ul class="container">
        <li>
        </li><li>
        </li><li>
        </li><li>
        </li><li>
        </li><li>
        </li>
    </ul>
    复制代码

    或者

    <ul class="container">
        <li></li><li></li><li></li><li></li><li></li><li></li>
    </ul>

    方法二:

    去掉闭合标签:

    复制代码
    <ul class="container">
        <li>
        <li>
        <li>
        <li>
        <li>
        <li>
    </ul>
    复制代码

    方法三:

    font-size:0

    复制代码
    .container{
        font-size: 0;
        -webkit-text-size-adjust:none; 
    }
    .container li{
        font-size:12px;
    }
    复制代码

    方法四:

    margin设为负值,*注:margin的值通常为font-size的一本取相反数

    .container li{
        margin-left:-.5em;
    }

    方法五:

    letter-spacing,跟上一种方式一样,取值为font-size的一半

    .container{
        letter-spacing: -.5em;
    }

    方法六:

    word-spacing,类似

    .container{
        word-spacing: -.5em;
    }
  • 相关阅读:
    taobao 爬虫基本思路分享
    浅谈python中字典append 到list 后值的改变问题
    滑动验证码验证
    selenium:css_selector定位详解
    01分数规划
    可持久化并查集(草稿)
    后缀自动机求endpos集大小
    伯努利数公式
    HDU 6619 Horse 斜率优化dp
    别人的回文自动机
  • 原文地址:https://www.cnblogs.com/-sayaa/p/7402496.html
Copyright © 2011-2022 走看看