zoukankan      html  css  js  c++  java
  • 让div不独占一行

    以  div  A 和 B为例,宽高为100px。

    1、使div浮动起来,效果图如下

      

    2、给 div 添加CSS属性  display:inline;

      但是这样会造成 div 的宽高无效,宽高是被 div 内的内容撑开的,效果如下图:

      

      使用  display:inline-block;  效果如下图:

      

      但是这样会产生一个新的问题,A 和 B 中间有一个缝隙

      这个问题产生的原因是换行引起的,因为我们写标签时通常会在标签结束符后顺手打个回车,而回车会产生回车符,回车符相当于空白符,通常情况下,多个连续的空白符会合        并成一个空白符,而产生“空白间隙”的真正原因就是这个让我们并不怎么注意的空白符。

      解决方案:

      对父元素添加,{font-size:0},即将字体大小设为0,那么那个空白符也变成0px,从而消除空隙 (div内的字同时消失)    

     效果图如下:

      

      

  • 相关阅读:
    什么是ETL?5分钟看完秒懂
    横向滚动 css
    解决echarts中横坐标值显示不全(自动隐藏)问题
    Echarts
    post 二进制流下载文件
    如何停止foreach
    日期格式 js
    cookie 属性
    HTML5 file对象和blob对象的互相转换
    前端图片压缩
  • 原文地址:https://www.cnblogs.com/PHP0222wangdong/p/11060004.html
Copyright © 2011-2022 走看看