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>

    如图显示:

  • 相关阅读:
    pythoon 学习资源
    cookie -- 添加删除
    前端技能
    jsonp 跨域2
    jsonp 跨域1
    webpy.org
    Flask 学习资源
    pip install flask 安装失败
    弹窗组价
    js中的deom ready执行的问题
  • 原文地址:https://www.cnblogs.com/huanghuali/p/8408700.html
Copyright © 2011-2022 走看看