去除inline-block之间的空白
做一个水平排列的导航通常有以下几种布局：
1、给一个浮动。
2、设置display为inline。
3、设置display为inline-block。
但要追求代码量最少的话，设置为inline元素或者inline-block元素通常最为简洁：
li{
display:inline;
}
但是又有一个问题，inline元素设置垂直padding没用，于是inline-block发挥作用了。
li{
display:inline-block;
}
但是问题又来了：
每个li之间的空白怎么回事？这是由于换行符导致的，因为换行符也是一个字符，因此会有以上的空白，因此直接给font-size设为0就行了。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
margin: 0;
padding: ;
}
ul{
font-size: 0;
}
li{
display: inline;
padding: 10px;
text-align: center;
font-size: 16px;
background-color: #eee;
list-style: none;
}
</style>
</head>
<body>
<ul>
<li>item1</li>
<li>item2</li>
<li>item3</li>
<li>item4</li>
<li>item5</li>
<li>item6</li>
</ul>
</body>
</html>
去除inline-block之间的空白的更多相关文章
- CSS3如何去除 inline block 元素之间多出的空格
display: inline-block 属性很好的避免了元素的浮动问题,但是会有点小问题,就是 inline-block 元素间的回车会被显示为一个空格.然而,我们写代码时,都是用回车来格式化的. ...
- 清除inline-block元素之间的空白
一个元素如果被设置为display:inline-block,那么这个元素将表现为行内块的性质.被设为行内块的元素 对内(子元素)表现为块级框,具体为可以设置高度宽度,可以设置垂直margin和pad ...
- 5种方法去掉HTML中Inline-Block元素之间的空白
5种方法去掉HTML中Inline-Block元素之间的空白 记得年轻时我在IE6上开发,绝望的希望IE6能支持display: inline-block功能.当需要在”inline”元素上控制mar ...
- 清除行内元素之间HTML空白的几种解决方案
行内块(inline-block)是非常有用的,特别是想要不用'block'和'float'来控制这些行内元素的margin,padding之时. 问题来了,HTML源码中行内元素之间的空白有时候显示 ...
- 如何移除inline-block元素之间的空白
我们想要的是<li>元素可以紧贴在一起,但是很显然,结果“出乎意料”.那么有什么方法可以让结果符合我们的预期呢?所能想到的解决方法至少有以下四种,而每种方法也都有其优劣所在,至于要如何选择 ...
- li 与 li 之间有空白间隔是什么原因引起的，有什么解决办法
li 与 li 之间有空白间隔是什么原因引起的,有什么解决办法 原因 浏览器会把inline元素间的空白字符(空格.换行.Tab等)渲染成一个空格.而为了美观,我们通常是一个 放在一行,这导致 换行后 ...
- Latex: 减少图与文字之间的空白间隙
参考: Remove space after figure and before text Latex: 减少图与文字之间的空白间隙 论文中图与文字之间的空白间隙过大,导致排版不大美观.解决方法是在\ ...
- inline-blcok 之间的空白间隙
前言: inline-blcok 布局时,通常情况下, inline-blocks 之间有空白,尽管通常我们是不想要的,毕竟不像padding或者margin一样好控制,如图: <div cla ...
- WPF Datagrid 控制 第一行和第一列之间的空白
原文:WPF Datagrid 控制 第一行和第一列之间的空白 这个位置就是 这里 我们更改 DataGridControltemplate 模板 看树形结构 里面是一个BUtton 功能是全选 能找 ...
随机推荐
- hdu X问题 （中国剩余定理不互质）
http://acm.hdu.edu.cn/showproblem.php?pid=1573 X问题 Time Limit: 1000/1000 MS (Java/Others) Memory ...
- This InfoPath form template is browser-compatible, but it cannot be browser-enabled on the selected site
- all features were running on sitecollection level and at site level But here is the solution, i do ...
- centos7 二进制安装mysql5.6
下载mysqltar包 wget -q http://mirrors.sohu.com/mysql/MySQL-5.6/mysql-5.6.35-linux-glibc2.5-x86_64.tar.g ...
- LOJ#2190. 「SHOI2014」信号增幅仪（最小圆覆盖）
题面 传送门 题解 我连椭圆是个啥都不知道导致这么简单一道题我一点思路都没有-- 我们把坐标系旋转一下,让半长轴成为新的\(x\)轴,也就是说所有点都绕原点逆时针旋转\(360-a\)度,然后再把所有 ...
- 记一次MBR锁机病毒分析
有一天,在机缘巧合之下我获得了一个锁机软件(是多巧合阿喂!),然后兴高采烈的把它拖入了虚拟机里蹂躏(>_<!). 很巧,软件有虚拟机检测... Emmmm好吧,随便过一下... 我用的虚拟 ...
- 敏感词过滤的算法原理之 Aho-Corasick 算法
参考文档 http://www.hankcs.com/program/algorithm/implementation-and-analysis-of-aho-corasick-algorithm-i ...
- Markdown入门简介
参考 http://sspai.com/25137 作者: Te_Lee 文章来源: 少数派 Markdown入门简介(使用工具Haroopad) 一.使用的工具----haroopad(http:/ ...
- 谷歌将对欧洲 Android 设备制造商收取其应用服务费用
简评:欧盟就谷歌违反了<反垄断法>开出天价罚单,导致谷歌运营生态被打破,为了配合这一裁决,谷歌将调整其运营模式.欧盟似乎赢了,而这最后买单的却是消费者. 今年七月份,谷歌要求 Androi ...
- Linux之Ubuntu切换root su -
当在Ubuntu系统从普通用户切换到root用户时,总是会报错,提示错误信息.这时因为我们还没有给系统中的root用户设置密码,我们给Ubuntu系统中的root用户设置一个密码就可以实现普通用户和管 ...
- P2278 操作系统
P2278 操作系统 题目描述 写一个程序来模拟操作系统的进程调度.假设该系统只有一个CPU,每一个进程的到达时间,执行时间和运行优先级都是已知的.其中运行优先级用自然数表示,数字越大,则优先级越高. ...