解决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元素的特点是: 总是在 ...
随机推荐
- 大数据计算引擎之Flink Flink CEP复杂事件编程
原文地址: 大数据计算引擎之Flink Flink CEP复杂事件编程 复杂事件编程(CEP)是一种基于流处理的技术,将系统数据看作不同类型的事件,通过分析事件之间的关系,建立不同的时事件系序列库,并 ...
- 《FA分享》---创业学习--训练营直播第二课--HHR
盛沛涵,以太白泽董事 一,基金投资的出发点: 1,这个赛道是否只有头部一两名有机会,如果不是,投的概率更大. 2, 基金投资的判断逻辑: 1.我是不是要在这个赛道布局 2.这个赛道分布如何,有 ...
- ndarray数据类型及转换
ndarray数据类型 Ndarray的基本数据类型如下图所示,数据类型的命名采用“类型名+数字”的形式表示,数字表示数据的比特位长.在计算机中比特位bit是表示数据最小的单位,1个字节Byte的长度 ...
- HDU5444 Elven Postman
按要求递归建树输出~ #include<cstdio> #include<algorithm> #include<cstring> using namespace ...
- Codeforces Round #611 (Div. 3) C
There are nn friends who want to give gifts for the New Year to each other. Each friend should give ...
- 在Visual Studio 2017中，.NET(C#)通过Oracle.ManagedDataAccess来连接Oracle数据库
C#如何通过Oracle.ManagedDataAccess来连接Oracle数据库 1.先创建一个项目,鼠标右击项目中的引用,再点击管理NuGet程序包(也可以先下载dll文件,再选添加引用),在搜 ...
- Educational Codeforces Round 79 (Rated for Div. 2) - D. Santa's Bot(数论)
题意:有$n$个孩子,第$i$个孩子有$k[i]$件想要的礼物,第$j$个礼物为$a[i][j]$,现在随机挑一个孩子,从他想要的礼物里面随机挑一个,然后送给另一个孩子$($这个孩子可以和第一个孩子是 ...
- Nginx实现HTTP及TCP负载均衡
这种通过一台apache的服务器把客户请求分别传递给两台tomcat叫负载均衡 ========================================= ================= ...
- LinkQueue(链队)
今天学习了队列,因为前面写了好几个链表实现的数据结构基本上都懂了,然后大致了解了一下队列的特点,便决定用自己的理解来实现一个,然后实现了. (2018-02-14 代码更新) Head file: # ...
- 第三节：Vuejs常用特性2和图书案例
一. 常用特性2 1. 监听器 用watch来响应数据的变化, 一般用于异步或者开销较大的操作, watch 中的属性 一定是data 中 已经存在的数据!!! 当需要监听一个对象的改变时,普通的wa ...