去除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 功能是全选 能找 ...
随机推荐
- IIS部署网站常见问题
有时候Web项目在VS开发环境下没有问题,但是在IIS服务器下却出现了问题. 这让人很抓狂. 在这里总结下通常发生这种问题的几个主要原因. 1.IIS注册.Net框架. 1.1:C:\WINDOWS\ ...
- apache ap 并发测试工具
可以使用 apache httpd 软件包里的 ab.exe 简单的做些网站的性能测试, ab.exe 是一个命令工具,所以不能双击运行, 在 cmd 下运行: ab.exe -n 1000 -c 5 ...
- iOS 设置 (plist)
Architectures:
- 数据库访问接口(ODBC、OLE DB、ADO)
最近在学C#的数据库编程,对于数据库接口技术这块的知识一直比较模糊,网上查了不少资料,看了几天还是朦朦胧胧的,只能做些笔记再研究了. 我们都知道,“数据库”是指一组相关信息的集合,最早的计算机应用之一 ...
- java学习笔记—HttpServletResponse（21）
public void doGet(HttpServletRequest request, HttpServletResponse response)throws ServletException, ...
- 微信小程序转发商品的详情页 + 转发功能（传参）
1.微信小程序转发传参,利用的还是onShareAppMessageapi 2.利用的还有json转换 JSON 是用于存储和传输数据的格式. JSON 通常用于服务端向网页传递数据 函数 描述JSO ...
- java中继承的关系
当有父子关系的两个类(继承关系),当子类实例化对象的时候 会默认调用父类的无参构造方法,如果有 super()的话,调用的是父类有参的构造方法! 也就是说 父类必须有 有参构造 没有的话super ...
- asp代码审计
今天给大家带来的是asp程序的代码审计,asp和aspx代码审计来说,有很多相同的地方. 正好今天要交任务,最近的目标站的子域名使用了这个cms,但是版本不一定是这个,好累. 本文作者:i春秋签约作家 ...
- [SQL] 简单新建(create)删除(drop\delete)权限(grant/revoke)修改(set\update)
一.前言 说起来 数据库(Structured Query Language),本站写过很多类似文章. 如: Mysql创建.删除用户 phpMyAdmin 登陆需要密码 记一次裸迁 MySQL 经历 ...
- linux安装spark-2.3.0集群
(安装spark集群的前提是服务器已经配置了jdk并且安装hadoop集群(主要是hdfs)并正常启动,hadoop集群安装可参考<hadoop集群搭建(hdfs)>) 1.配置scala ...