一聚教程网：一个值得你收藏的教程网站

ps教程| flash教程| 路由器设置| Jsp教程| 加入收藏

PHP教程 Css教程 操作系统 数据库 安卓下载

首页 游戏下载 软件下载 专题 资讯教程 php教程 asp.net教程 css教程 网页制作 网页特效 手机开发 办公数码
+ -
当前位置：一聚教程网 > css教程 > 常用代码

推荐专题

最新下载

热门教程

css中inline-block元素的空白间距

时间：2022-06-25 09:40:10 编辑：袖梨 来源：一聚教程网

解决办法

第三种方法设置父元素的字体为“0”，然后在“inline-block”元素上重置字体需要的大小。

 代码如下 复制代码


ul {
  list-style: none outside none;
  padding: 10px;
  background: green;
  text-align: center;
  font-size: 0px;
    }
ul li {
  display: inline-block;
  *display: inline;
  zoom: 1;
  background: orange;
  padding: 5px;
  font-size: 12px;
}

上面的办法在ff,gg浏览器还是不错了，但是在其它浏览器还是不行，最后我介绍一种jquery解决办法

jquery方法

最后在给大家提供一种jquery的方法：

 代码如下 复制代码

HTML代码


     
  • item1

    •  
  • item2

    •  
  • item3

    •  
  • item4

    •  
  • item5

 

CSS代码

ul {
  list-style: none outside none;
  padding: 10px;
  background: green;
  text-align: center;
  font-size: 12px;
}
ul li {
  display: inline-block;
  *display: inline;
  zoom: 1;
  background: orange;
  padding: 5px;
}

 

jQuery 代码

 代码如下 复制代码

 $('.removeTextNodes').contents().filter(function() {
    return this.nodeType === 3;
    }).remove();

 

最后一种方法是通过jQuery来改变“nodeType”的值，从而实现我们需要的效果。

相关文章

热门栏目

一聚教程网| 关于我们| 联系我们| 广告合作| 友情链接| 版权声明

copyRight@2007-2022 www.111CN.NET AII Right Reserved

网站内容来自网络整理或网友投稿如有侵权行为请邮件:[email protected] 我们24小时内处理