除掉inline-block 间距
1、现象：
<!doctype html>
<html lang="en"> <head>
<meta charset="UTF-8" />
<title>除掉inline-block 间距</title>
<style type="text/css">
* {
padding: 0;
margin: 0;
} ul {
list-style: none;
} ul li {
display: inline-block;
width: 100px;
border: 1px solid red;
}
</style>
</head> <body>
<ul>
<li>555</li>
<li>666</li>
<li>777</li>
</ul>
</body> </html>
显示效果：
2、处理方法
父元素设置font-size: 0;
<!doctype html>
<html lang="en"> <head>
<meta charset="UTF-8" />
<title>除掉inline-block 间距</title>
<style type="text/css">
* {
padding: 0;
margin: 0;
} ul {
list-style: none;
/*关键属性设置*/
font-size: 0;
} ul li {
display: inline-block;
width: 100px;
border: 1px solid red;
font-size: 16px;
}
</style>
</head> <body>
<ul>
<li>555</li>
<li>666</li>
<li>777</li>
</ul>
</body> </html>
显示效果：
除掉inline-block 间距的更多相关文章
- inline-block,inline,block,table-cell,float
float:left ---------------------------------------------------------------------------------------- ...
- inline,block,inline-block的区别
display:block block元素会独占一行,多个block元素会各自新起一行.默认情况下,block元素宽度自动填满其父元素宽度. block元素可以设置width,height属性.块级元 ...
- 块状元素和内联元素 【inline block】
// 9) { colorRandom += colorArray[randomV - 10]; } else { colorRandom += randomV; } } currentEle.css ...
- inline, block, and inline-block
总体概念 block和inline这两个概念是简略的说法,完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素).block元素通 ...
- display:inline block inline-block 的区别
原文地址:http://blog.csdn.net/jly036/article/details/5506182 display:block就是将元素显示为块级元素. block元素的特点是: 总是在 ...
- inline,block,inline-block解析
display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都可控制: 宽度缺省是它的容器的100%,除非设定一个宽度 <div& ...
- CSS3如何去除 inline block 元素之间多出的空格
display: inline-block 属性很好的避免了元素的浮动问题,但是会有点小问题,就是 inline-block 元素间的回车会被显示为一个空格.然而,我们写代码时,都是用回车来格式化的. ...
- CSS 概念 Block Inline Containing block
Block 元素 包括 "block-level box," "block container box," and "block box" ...
- [CSS3] CSS Display Property: Block, Inline-Block, and Inline
Understanding the most common CSS display types of block, inline-block, and inline will allow you to ...
- 去除inline-block元素间间距的N种方法<转>
一.现象描述 真正意义上的inline-block水平呈现的元素间,换行显示或空格分隔的情况下会有间距,很简单的个例子: <input /> <input type="su ...
随机推荐
- select 语句的执行顺序
select 语句的执行顺序 借用ItZik Ben-Gan.Lubor Kollar.Dejan Sarka所著的<Sql Server 2005 技术内幕:T-SQL查询>的一段话足以 ...
- MessasgePack：一个小巧高效的序列化方式
MessagePack是一种高效二进制序列化格式.可以在多种语言中进行快速数据交换,比如JSON格式等.它比Json更加小巧,更加高效,可以用于一些结构化数据存储 ,非常适合适用于消息总线,Memor ...
- BitTorrent Sync 老版本
Sync version 1.4.111 Installer for Windows: BTSync.exe BTSync_x64.exe Installer for OSX: BTSync.dmgG ...
- Android设备运用Clockworkmod Recovery恢复模式安装定制的Rom
Clockworkmod Recovery是一个由Cyanogen团队开发的用于Android设备的第三方定制Recovery恢复模式,也称为CWM Recovery,具体它有什么用处呢?请看关于Go ...
- springboot2.X 在项目启动后执行一段自定义代码
场景: 项目需要在项目启动后从数据库初始化一些数据进入redis , 但是没有很适合 的监听器去实现 , 监听 老是在dao初始化之前触发. 解决方法:自定义类实现 ApplicationRunner ...
- pytest文档17-fixture之autouse=True
前言 平常写自动化用例会写一些前置的fixture操作,用例需要用到就直接传该函数的参数名称就行了.当用例很多的时候,每次都传这个参数,会比较麻烦. fixture里面有个参数autouse,默认是F ...
- Velocity中的ComparisonDateTool、MathTool、NumberT...
Velocity中的ComparisonDateTool.MathTool.NumberTool.SortTool.EscapeTool工具 可以从Apache官方网站自带的例子中查找,位置\velo ...
- 《JavaScript编程实战》
<JavaScript编程实战> 基本信息 原书名:JavaScript programming: pushing the limits 作者: (美)Jon Raasch 译者: 吴海星 ...
- 泛泰A870（高通600 cpu 720p） 刷4.4专用中文recovery TWRP2.7.1.1版（三版通刷）
欢迎关注泛泰非盈利专业第三方开发团队 VegaDevTeam (本team 由 syhost suky zhaochengw(z大) xuefy(大星星) tenfar(R大师) loogeo cr ...
- Navicat Premium 12全系列
Navicat 是香港卓软数码科技有限公司生产的一系列 MySQL.MariaDB.Oracle.SQLite.PostgreSQL 及 Microsoft SQL Server 的图形化数据库管理及 ...