去除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 功能是全选 能找 ...
随机推荐
- WebApi 插件式构建方案：发现并加载程序集
插件式的 WebApi 开发,首要面对的问题就是程序集的发现.因为开发的过程中,都是在各自的解决方案下进行开发,部署后是分模块放在一个整体的的运行时网站下. 约定 这里我根据上一节的设定,把插件打包完 ...
- GO学习笔记 - 基本数据类型
官方教程:https://tour.go-zh.org/basics/11 Go 的基本类型有Basic types bool string int int8 int16 int32 int64 ui ...
- MyBatis入门程序（基于XML配置）
创建一个简单的MyBatis入门程序,实现对学生信息的增删改查功能(基于XML配置) 一.新建一个Java工程,导入MyBatis核心jar包.日志相关的jar包以及连接Oracle数据库所需驱动包, ...
- Net Manager测试连接测试没有成功，用户权限问题，以管理员身份运行后测试成功
Net Manager测试连接测试没有成功,截图如下:
- 报错 POST http://192.168.79.165:8015/marketing/manager 400 (BAD REQUEST) 解决办法
我用jQuery ajax post方法 用flask url_for 传值到后端 $.ajax({ url:"{{url_for('marketing.manager')}}", ...
- java使用Redis4--主从复制
redis主从复制配置和使用都非常简单.通过主从复制可以允许多个slave server拥有和master server相同的数据库副本.下面是关于redis主从复制的一些特点: 1.ma ...
- [Linux] 如何在 Linux 中提取随机数
如何在 Linux 中提取随机数 一.设备文件 /dev/random & /dev/urandom 字符特殊文件 /dev/random 和 /dev/urandom (存在于Linux 1 ...
- 个人KPI制定
1.工作量 1.1 能独立完成工作优先级 1.2 能独立预估工作时间 2.工作质量 2.1 项目按时完成没有延期 2.2 交付件质量 2.2.1 测试用例设计没有明显遗漏 2.2.2 测试bug符合规 ...
- hibernate与Oracle
今天在用hibernate连接Oracle数据库进行查询时,出现一点小状况 数据库中是有数据的,而且程序本身也没有问题,可就是查不出数据,在经过几个小时的查找下,中遇找到了问题所在,那就是我Oracl ...
- leetcode-54-螺旋矩阵
题目描述: 给定一个包含 m x n 个元素的矩阵(m 行, n 列),请按照顺时针螺旋顺序,返回矩阵中的所有元素. 示例 1: 输入: [ [ 1, 2, 3 ], [ 4, 5, 6 ], [ 7 ...