inline-block间隙问题总结, ,style一个样式后面 多加了一个 分号; 导致 样式失效
1--- 样式最后的{}后面, 不能有分号 ;

2---- display:inline-block 后, 元素间会有间隙 原因: 由换行或者回车导致的。
解决一: 只要把标签写成一行或者标签直接没有空格,就不会出现间隙。 但是这种方式是不太可靠,存在太多不可控的因素导致失效,
例如:代码生成工具、代码格式化、或者其他人修改了代码等等。下面列举了各种去掉间隙的方法,是否适合需要看具体的应用场景了
<span>中间不留间隙</span><span>中间不留间隙</span><span>我是一个span</span><span>我是一个span</span>
解决二:结束标签和下一个开始标签同一行
<span>我是一个span
</span><span>我是一个span
</span><span>我是一个span
</span><span>我是一个span</span>
解决三:利用HTML注释标签
<span>我是一个span</span><!--
--><span>我是一个span</span><!--
--><span>我是一个span</span><!--
--><span>我是一个span</span>
解决四:把span标签的中间的结束标签去掉,只留最后一个闭合标签, 这样间隙就没有了。为了兼容IE6/IE7。(美团用这个方法)
<span>我是一个span
<span>我是一个span
<span>我是一个span
<span>我是一个span</span>
开始的几个的li标签没有闭合

解决五:在父容器上使用font-size:0;可以消除间隙-----对于Chrome有默认最小字体大小限制,考虑到兼容性,需要取消字体大小限制
在父容器样式加上: .demo{ font-size:0;-webkit-text-size-adjust:none }

解决六: 浮动, 需要清除浮动
总结别人的:
在移动端的页面中,个人倾向于设置font-size:0这种方法来清除掉。
inline-block间隙问题总结, ,style一个样式后面 多加了一个 分号; 导致 样式失效的更多相关文章
- inline,block,inline-block解析
display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都可控制: 宽度缺省是它的容器的100%,除非设定一个宽度 <div& ...
- 注意Android里TextView控件的一个小坑,用android:theme来设置样式时动态载入的layout会丢失该样式
注意Android里TextView控件的一个小坑,用android:theme来设置样式时动态载入的layout会丢失该样式 这个坑,必须要注意呀, 比如在用ListView的时候,如果在List_ ...
- <block/> 并不是一个组件,它仅仅是一个包装元素,不会在页面中做任何渲染,只接受控制属性
<block/> 并不是一个组件,它仅仅是一个包装元素,不会在页面中做任何渲染,只接受控制属性
- Umbraco Form 中需要为一个Form的某个field设置特别的CSS样式
在项目开发中,我有一个需求,需要建立一个页面,这个页面上有一个form, 这个form上有一个checkbox, 就是普通的接受terms & conditions, 类似下图 这个项目中的U ...
- CSS特异性(CSS Specificity)的细节之CSS样式权重的计算与理解(CSS样式覆盖规则)
本篇讲解CSS特异性(CSS Specificity)的细节,也就是CSS样式选择器的权重计算 通过计算选择器的权重(weight)最终决定哪个选择器将获得优先权去覆盖其他选择器的样式设定,即“优先原 ...
- WPF自定义控件与样式(5)-Calendar/DatePicker日期控件自定义样式及扩展
一.前言 申明:WPF自定义控件与样式是一个系列文章,前后是有些关联的,但大多是按照由简到繁的顺序逐步发布的等,若有不明白的地方可以参考本系列前面的文章,文末附有部分文章链接. 本文主要内容: 日历控 ...
- ASP.NET加载主题和皮肤样式的各种方式
一.加载主题(皮肤.样式表)的多种方式 除了在页面指令中采用Theme或者StylesheetTheme为单个页面加载主题外,还可以通过配置文件为多个页面批量加载主题,另外,还可以通过改变页面的The ...
- 样式的操作-访问外部定义的css样式
JS对css的控制力非常强,甚至可以控制外部定义的css样式 ———————————————————————— <style> .myclass{ ...
- vue 单文件 样式写了scoped 不能覆盖框架原有样式的解决办法
vue 单文件 样式写了scoped 不能覆盖框架原有样式的解决办法 在vue 里面<style scoped></style> 是为了让样式只影响本身自己组件的样式,不改变全 ...
随机推荐
- 主席树 || 可持久化线段树 || BZOJ 3653: 谈笑风生 || Luogu P3899 [湖南集训]谈笑风生
题面:P3899 [湖南集训]谈笑风生 题解: 我很喜欢这道题. 因为A是给定的,所以实质是求二元组的个数.我们以A(即给定的P)作为基点寻找答案,那么情况分两类.一种是B为A的父亲,另一种是A为B的 ...
- stm8 同时使用dac和adc 采集异常,电平异常
这种现象在早期的 使用stm8l151的dac 和adc相互干扰很厉害.后来通过读手册发现 相邻三个引脚一般不建议同时使用dac和adc.也就是这两种功能,引脚分配至少隔离三个引脚.内部为了节省成本 ...
- 关于break,return,和coutiune
public boolean searchStudent(String name,int start,int end) { if(students==null) { return false; } f ...
- ionic3 创建项目至apk打包全过程教程
主要流程: 安装node.js --> 安装jdk --> 安装AndroidSDK --> 安装cordova --> 安装ionic --> 创建项 ...
- JMeter学习-041-响应数据中文乱码解决方法
华夏子孙,中文为母语.因而在接口测试过程中,响应数据含有中文是再也正常不过的事情.同时,初学JMeter的童鞋,经常会遇到响应数据中中文乱码的问题. 本文中提供两种方式的修正方法,仅供大家参考,谢谢. ...
- docker单机网络类型
docker单机网络类型概述 Docker 安装时会自动在 host 上创建三种网络 分别为 bridge host none . 可用 docker network ls 命令查看 ...
- 011-MAC 设置环境变量path的几种方法
一.概述 首先要知道你使用的Mac OS X是什么样的Shell,使用命令 echo $SHELL 如果输出的是:csh或者是tcsh,那么你用的就是C Shell. 如果输出的是:bash,sh,z ...
- 【Go语言】基本的语法
昨天花了几个小时的时间把Go的语法过了一遍,发现Go语言的语法核心和大部分编程语言的规则还是挺相近的,差别的就是不同的书写规范.还有就是前天安装VScode编译器那个插件把人弄得恶心了,总是安装不成功 ...
- (转载)mybatis中传入参数是list或map
原文地址:http://blog.csdn.net/aya19880214/article/details/41961235 foreach的主要用在构建in条件中,它可以在SQL语句中进行迭代一个集 ...
- nodejs 癞子麻将
'use strict'; var _ = require('lodash'); var quick = require('quick-pomelo'); var P = quick.Promise; ...
