解决css中display:inline-block产生的空隙问题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
li{
list-style: none;
width: 100px;
height:20px;
border:1px solid #ff0000;
display: inline-block;
text-align: center;
}
</style>
</head>
<body>
<ul id="ul">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<body>
</head>
这样的代码会产生如下图所示的间隙问题
解决方法有很多，可以通过调整margin为负值来解决，也可以通过其他的方法，但是我最喜欢的是这种方法
<ul id="ul">
<li>1</li
><li>2</li
><li>3</li
><li>4</li>
</ul>
闭合标签放在下行的开头，或者是通过注释来解决
<ul id="ul">
<li>1</li><!--
--><li>2</li><!--
--><li>3</li><!--
--><li>4</li>
</ul>
亲测在浏览器下支持良好,ie6/7/8都OK的，但是有同学会说：display在ie6/7无效。那么请看我的上一篇决解display:inline-block的兼容问题
解决css中display:inline-block产生的空隙问题的更多相关文章
- 解决css中display:inline-block的兼容问题
*display:inline; *zoom:1; 不多说,ie6/7直接在元素添加以上的属性即可.
- 区别CSS中display：box；inline；none以及HTML中 <frame> 标签<table> 标签的 frame 属性
区别display:box:display:inline:display:none三者的不同 display:block的特点是: block是Display默认的值.总是在新行上开始:该对象随后的内 ...
- CSS中display:block的使用介绍
在CSS的规定中,每个页面元素都有一个display的属性,用于确定这个元素的类型是行内元素,还是块级元素: (1)行内元素:元素在一行内水平排列,依附于其他块级元素存在,因此,对行内元素设置高度.宽 ...
- 大话css之display的Block未解之谜（一）
用了几年的css了,css中inline | block |inline-block|table|flex从来没有做过系统的整理和分析,网上的分析文章也很多,零散. 今天有空,就在这做一下整理分析 b ...
- 解决CSS中float:left后需要clear:both清空的繁琐步骤(转)
之前,因为公司专门有CSS+DIV的切片设计师,所以我一直都是注重程序的设计与开发.现在,因为接了一些Web网站的项目需要制作,就在空闲时间学习起了CSS.Jquery. 现在,大部分的横排导航都 ...
- 解决CSS中float:left后需要clear:both清空
现在,大部分的横排导航都是通过 ul -> li *n -> a 来实现的.具我所知,要达到这种效果,有几种方法可以实现. 1.传统处理方式: li {float:left;}/*这样,对 ...
- 解决 IE7 中 display:inline-block 失效的问题
我们在做首页菜单选项的时候,通常会用 li 标签去做,通过对 li 标签设置样式: display:inline-block 可以让 li 标签横排显示.但是这样做,在 IE7 浏览器下面会有一个兼容 ...
- Css中display:inline-block用法详解
display:block就是将元素显示为块级元素 block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都可控制: 宽度缺省是它的容器的100%,除非设定一个宽度 <div&g ...
- display:inline block inline-block 的区别
原文地址:http://blog.csdn.net/jly036/article/details/5506182 display:block就是将元素显示为块级元素. block元素的特点是: 总是在 ...
随机推荐
- 常用的php函数
最严格身份证号码验证,支持15位和19世纪出生的人的身份证号码 # 计算身份证校验码,根据国家标准GB 11643-1999 function idcard_verify_number($idcard ...
- Bugku-CTF加密篇之简单加密（e6Z9i~]8R~U~QHE{RnY{QXg~QnQ{^XVlRXlp^XI5Q6Q6SKY8jUAA）
简单加密 e6Z9i~]8R~U~QHE{RnY{QXg~QnQ{^XVlRXlp^XI5Q6Q6SKY8jUAA
- HDU1540 Turnal Warfare
线段树保存每个区间的左边最大连续长度和右边最大连续长度~ #include<cstdio> #include<cstring> #include<algorithm> ...
- kafka单机搭建
1.安装jdk1.8和zookeeper 2.下载kafka上传服务器 下载地址:http://archive.apache.org/dist/kafka/0.10.0.0/kafka_2.11-0. ...
- springmvc中整合mongodb副本集配置文件
配置文件jdbc.properties: mongo.hostport=192.168.100.100:28007,192.168.100.110:28008,192.168.100.120:2800 ...
- 吴裕雄--天生自然Numpy库学习笔记：NumPy 矩阵库(Matrix)
import numpy.matlib import numpy as np print (np.matlib.empty((2,2))) # 填充为随机数据 numpy.matlib.zeros() ...
- nikic / PHP-Parser 包的简单实用
解析PHP文件: <?php require 'vendor/autoload.php'; use PhpParser\ParserFactory; $code = file_get_conte ...
- SAM（后缀自动机）总结
“写sam是肯定会去写的,这样才学的了字符串,后缀数组又不会用 >ω<, sam套上数据结构的感觉就像回家一样! 里面又能剖分又能线段树合并,调试又好调,我爱死这种写法了 !qwq” SA ...
- java编译中出现了Exception in thread “main" java.lang.UnsupportedClassVersionError
这个问题确实是由较高版本的JDK编译的java class文件试图在较低版本的JVM上运行产生的错误. 1.解决措施就是保证jvm(java命令)和jdk(javac命令)版本一致.如果是linux版 ...
- JavaScript的发展史
一.JavaScript发展历程 1. 诞生 JavaScript因互联网而生,紧跟浏览器的发展而发展. 1990年,欧洲核能研究所(CERN)科学家在互联网(Internet)基础上,发明了 ...