zoukankan      html  css  js  c++  java
  • 如何处理html中的内联元素之间水平空隙

    写HTML时把需要紧挨着的内联元素写在一行,设置其父容器的font-size为0,再设置内联元素的字体大小,例如:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style type="text/css">
            *{margin:0;padding:0;}
            body{ color: #333 }
            .demo{ overflow: hidden; font-size: 0 }
            span{ display: inline-block; width: 100px; height: 100px; background-color: #ddd; border:1px solid #000; }
            .demo span{ font-size: 16px; }
        </style>
    </head>
    <body>
        <div class="demo">
            <span>设置内联元素写在一行</span>
            <span>设置内联元素写在一行</span>
            <span>设置内联元素写在一行</span>
            <span>设置内联元素写在一行</span>
            <span>设置内联元素写在一行</span>
            <span>设置内联元素写在一行</span>
        </div>
        
    </body>
    </html>

    如图显示:

  • 相关阅读:
    leetcode刷题笔记303题 区域和检索
    leetcode刷题笔记301题 删除无效的括号
    20201208日报
    20201118日报
    20201117日报
    20201116日报
    20201115日报
    20201114日报
    20201113日报
    20201112日报
  • 原文地址:https://www.cnblogs.com/huanghuali/p/8408700.html
Copyright © 2011-2022 走看看