解决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元素的特点是: 总是在 ...
随机推荐
- Spring Boot RestApi 测试教程 Mock 的使用
测试 Spring Boot Web 的时候,我们需要用到 MockMvc,即系统伪造一个 mvc 环境.本章主要编写一个基于 RESTful API 正删改查操作的测试用例.本章最终测试用例运行结果 ...
- SpringBoot与Mybatis整合(包含generate自动生成代码工具,数据库表一对一,一对多,关联关系中间表的查询)
链接:https://blog.csdn.net/YonJarLuo/article/details/81187239 自动生成工具只是生成很单纯的表,复杂的一对多,多对多的情况则是在建表的时候就建立 ...
- WLAN配置SKC
1.关于SKC WLC支持粘滞密钥缓存(Sticky Key Caching,SKC). 通过SKC,客户端为其关联的每个AP接收并存储不同的PMKID. AP还维护发布给客户端的PMKID数据库. ...
- 实时监听 mysql 操作,Linux 版
效果 场景:某数据库新增了某条记录,服务器可以监听到变化的数据与操作,如 增加一条记录: id = 1009,name=''test,number = 11 服务器监听结果: 实现过程 测试过程:数据 ...
- leetcode 0215
目录 ✅ 1002. 查找常用字符 描述 解答 java other's implementation(todo watch me) cpp py ✅ 821. 字符的最短距离 描述 解答 cpp p ...
- Python学习第二十六课——PyMySql(python 链接数据库)
Python 链接数据库: 需要先安装pymysql 包 可以设置中安装,也可以pip install pymysql 安装 加载驱动: import pymysql # 需要先安装pymysql 包 ...
- Maven____笔记摘抄
1 1.maven的作用 i.增加第三方Jar (spring-context.jar spring-aop.jar ....) ii.jar包之间的依赖关系 (spring-context.jar ...
- Mac 系统上有趣的插件
1.微信小助手:https://github.com/TKkk-iOSer/WeChatPlugin-MacOS 作用:开启消息撤回拦截,设置自动回复,远程登录Mac,微信多开,免认证登录.... 2 ...
- Mysql基本用法-存储引擎-03
看到存储引擎这个地方感到很多细节比较陌生,所以总结小记一些 为了适应各种不同的运行环境,MYSQL提供了多种不同的存储引擎(Storage Engine ),在应用程序开发这个层面上,开发者可以根据不 ...
- 10 从DFS到DFT
从DFS到DFT 周期序列的级数展开 正如连续时间周期信号可以表示为一系列正弦信号的和的形式,周期序列也可以表示为一系列正弦之和的形式,假设序列\(\tilde{x}[n]\)的周期为\(N\),那 ...