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

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. linux的定制和发布（二）

    Linux的发布         有时候希望将定制好的Linux移植到其他的机器上使用,所以我们将定制好的Linux制作 成安装光盘的形式,可以方便在其他机器上安装. 为此我们要先制作一个引导系统,由 ...

  2. C++ windows下共享内存

    转载:https://blog.csdn.net/tojohnonly/article/details/70246965 共享内存 (也叫内存映射文件) 主要是通过映射机制实现的 , Windows ...

  3. php 命令行脚本运行php文件简单演示

    众说周知,php在web服务器领域有着很重要的角色,可是它不仅仅在web领域,只是在web领域表现更为优秀! 它基本有三种用途: web服务端脚本的编写 应用程序图形界面(类似windows自带的计算 ...

  4. 「ZJOI 2010」 排列计数

    题目链接 戳我 \(Solution\) 其实我们可以发现这题等价于让你求: 用\(1\)~\(n\)的数组成一个完全二叉树使之满足小根堆性质的方案数 于是我们可以考虑\(dp\) 假设我们现在在\( ...

  5. docker 存储驱动之 overlay2

    overlay2 简介 OverlayFS是一种和AUFS很类似的文件系统,与AUFS相比,OverlayFS有以下特性:  1) 更简单地设计 2) 从3.18开始,就进入了Linux内核主线 3) ...

  6. ClamAV学习【7】——病毒库文件格式学习

    搜查到一份详细的ClamAV病毒文件格式资料(http://download.csdn.net/detail/betabin/4215909),英文版,国内这资料不多的感觉. 重点看了下有关PE的病毒 ...

  7. DC010的精华分享【首发速看】

    世界黑客大会[DC010] 是全球安全圈最神秘.最前沿的黑客大派对 而作为中国首个受DEFCON授权支持成立的 地区性 信息 安全 技术交流平台 DEFCONGROUP 010(DC010) 在国内 ...

  8. 推荐 9 个样式化组件的 React UI 库

    简评:喜欢 CSS in JS 吗?本文将介绍一些使用样式组件所构建的 React UI 库,相信你会很感兴趣的. 在 React 社区,对 UI 组件进行样式化的讨论逐步从 CSS 模块到内联 CS ...

  9. python中的字符串和编码

    了解编码之前首先说下这几个词的概率: 位.字节.字符.字符串 1.位(bit)也称为比特 这个其实很简单,因为计算机都是二进制存储数据,也就是0和1,一个0或者1就表示一位.这是计算机存储的最小单位. ...

  10. 多线程：GCD

    多线程是程序开发中非常基础的一个概念,大家在开发过程中应该或多或少用过相关的东西.同时这恰恰又是一个比较棘手的概念,一切跟多线程挂钩的东西都会变得复杂.如果使用过程中对多线程不够熟悉,很可能会埋下一些 ...