解决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元素的特点是: 总是在 ...
随机推荐
- Beego Learning Notes
Beego框架学习 1.1软件框架 一个公司是由公司中的各部部门来组成的,每一个部门拥有特定的职能,部门与部门之间通过相互的配合来完成让公司运转起来. 一个软件框架是由其中各个软件模块组成的,每一个模 ...
- django之路由分组，路由分发，FBV，CBV，ORM框架
今日的内容: a. 路由系统 1. 创建app 2. 路由的分组 3. 路由的分发 - 正则表达式匹配 b. django的orm(模型model) 1. 创建模型的步骤 2. orm基本的增删改查 ...
- Http 状态码总结
HTTP 状态码列表 一. 1 开头 (继续执行) 服务器收到请求,需要请求者继续执行操作 100:(continue) 客户端继续请求 101:(Switching Protocols) 切换协议, ...
- 02-14Android学习进度报告十四
今天我学习了关于构建一个可复用的自定义BaseAdapter的知识. 首先将Entity设置成泛型 代码示例: public class MyAdapter<T> extends Base ...
- python列表操作方法详解
列表 列表是Python中最基本的数据结构,列表是最常用的Python数据类型,列表是一个数据的集合,集合内可以放任何数据类型,可对集合方便的增删改查操作.Python已经内置确定序列的长度以及确 ...
- Python开发：变量类型
1.变量赋值 #!/usr/bin/python # -*- coding: UTF-8 -*- counter = 100 # 赋值整型变量 miles = 1000.0 # 浮点型 name = ...
- 笔记-twisted源码-import reactor解析
笔记-twisted源码-import reactor解析 1. twisted源码解析-1 twisted reactor实现原理: 第一步: from twisted.internet ...
- Mate Linux 桌面的什么受GNOME 2 粉丝喜欢 ？
导读 如果你以前听过这个传闻:当 GNOME3 第一次发布时,很多 GNOME 用户还没有准备好放弃 GNOME 2. Mate(以马黛茶yerba mate植物命名)项目的开始是为了延续 GNOME ...
- aws-ec2-upload
EC2上建立文件夹并开放权限 $ mkdir /home/upload$ chmod 777 /home/upload 本机文件 上传 到EC2服务器$ scp -i awsub01.pem noip ...
- JVM虚拟机内存溢出垃圾收集及类加载机制总结
1.Java内存区域与内存溢出异常 虚拟机栈:为虚拟机执行Java方法服务 本地方法栈:为虚拟机使用到的native方法服务. Java堆:是Java虚拟机所管理的内存中最大的一块,被所有线程共享的一 ...