做一个水平排列的导航通常有以下几种布局：

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之间的空白的更多相关文章

  1. CSS3如何去除 inline block 元素之间多出的空格

    display: inline-block 属性很好的避免了元素的浮动问题,但是会有点小问题,就是 inline-block 元素间的回车会被显示为一个空格.然而,我们写代码时,都是用回车来格式化的. ...

  2. 清除inline-block元素之间的空白

    一个元素如果被设置为display:inline-block,那么这个元素将表现为行内块的性质.被设为行内块的元素 对内(子元素)表现为块级框,具体为可以设置高度宽度,可以设置垂直margin和pad ...

  3. 5种方法去掉HTML中Inline-Block元素之间的空白

    5种方法去掉HTML中Inline-Block元素之间的空白 记得年轻时我在IE6上开发,绝望的希望IE6能支持display: inline-block功能.当需要在”inline”元素上控制mar ...

  4. 清除行内元素之间HTML空白的几种解决方案

    行内块(inline-block)是非常有用的,特别是想要不用'block'和'float'来控制这些行内元素的margin,padding之时. 问题来了,HTML源码中行内元素之间的空白有时候显示 ...

  5. 如何移除inline-block元素之间的空白

    我们想要的是<li>元素可以紧贴在一起,但是很显然,结果“出乎意料”.那么有什么方法可以让结果符合我们的预期呢?所能想到的解决方法至少有以下四种,而每种方法也都有其优劣所在,至于要如何选择 ...

  6. li 与 li 之间有空白间隔是什么原因引起的，有什么解决办法

    li 与 li 之间有空白间隔是什么原因引起的,有什么解决办法 原因 浏览器会把inline元素间的空白字符(空格.换行.Tab等)渲染成一个空格.而为了美观,我们通常是一个 放在一行,这导致 换行后 ...

  7. Latex: 减少图与文字之间的空白间隙

    参考: Remove space after figure and before text Latex: 减少图与文字之间的空白间隙 论文中图与文字之间的空白间隙过大,导致排版不大美观.解决方法是在\ ...

  8. inline-blcok 之间的空白间隙

    前言: inline-blcok 布局时,通常情况下, inline-blocks 之间有空白,尽管通常我们是不想要的,毕竟不像padding或者margin一样好控制,如图: <div cla ...

  9. WPF Datagrid 控制 第一行和第一列之间的空白

    原文:WPF Datagrid 控制 第一行和第一列之间的空白 这个位置就是 这里 我们更改 DataGridControltemplate 模板 看树形结构 里面是一个BUtton 功能是全选 能找 ...

随机推荐

  1. DotNetBar.MetroTilePanel 样式、加载数据、获取数据

    描述下:MetroTilePanel包含子集ItemContainer  子集下面又包含子集MetroTileItem  目前我用到的就是这三层 因为需求所以整个模块全部由代码实现 1.ItemCon ...

  2. window下使用MyCat实现简单的读写分离

    参考文档 MyCat权威指南 MyCat项目主页 学会数据库读写分离.分表分库--用Mycat,这一篇就够了! MyCat安装 Java SDK下载(必须JDK7或更高版本) MYSQL下载 (MyC ...

  3. python--内置常用模块(一) collections 队列 time模块 functiontools

    一. 模块的简单认识 模块就是我们把装有特定功能的代码进行归类的结果.从代码编写的单位来看我们的程序,从小到大的顺序:一条代码 < 语句块 < 代码块(函数,类) < 模块,我们目前 ...

  4. “全栈2019”Java多线程第十四章：线程与堆栈详解

    难度 初级 学习时间 10分钟 适合人群 零基础 开发语言 Java 开发环境 JDK v11 IntelliJ IDEA v2018.3 文章原文链接 "全栈2019"Java多 ...

  5. Java io流完成复制粘贴功能

    JAVA 中io字节输入输出流 完成复制粘贴功能: public static void main(String[] args) throws Exception{        // 创建输入流要读 ...

  6. java中-的流-与操作

    /* 字节输出流  OutputStrema:     * OutputStream抽象类     * write(int b); 将指定的字节写入此流中     * write(byte[] b); ...

  7. 《快学Scala》第四章 映射与元组

  8. 【bug】—— IE8 ajax 报错：no transport

    如题,我使用$.ajax()方法请求数据,在现代浏览器中工作正常,但在 IE 8 下,会有报错:no transport 从 stackoverflow 中获知,出现这个问题是因为** IE 8 不支 ...

  9. 部署LVS-NAT群集

    案例环境 LVS调度器作为Web服务器池的网关,LVS两块网卡,分别连接内外网,外网地址172.16.16.172.24,同时也作为整个群集的VIP,内网地址为192.168.7.21-24/24,是 ...

  10. VS中工程的“依赖”，“库目录”，“包含目录”

    写多了Vs中的工程,就会遇到很多环境配置问题,例如“依赖项”,“库目录”,“包含目录”等等等等. 今天要记录的就是这些的基本含义:我们拿一个例子来看,更加清晰易懂一些: 例如在Opencv3.0+VS ...