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

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. 更改JupyterNotebook默认文件路径 行之有效！

    在安装了Anaconda以后浏览器默认打开的是C盘用户目录,平时不想把一些文件.代码放在C盘尤其是用户目录下,所以考虑将默认路径改掉,尝试了网上的几种方法,终于找到了一种可行有效的. 1.找到jupy ...

  2. nutch-2.2.1 hadoop-1.2.1 hbase-0.92.1 集群部署(实用)

    原文地址: http://www.cnblogs.com/i80386/p/3540389.html 参考网站:http://blog.csdn.net/weijonathan/article/det ...

  3. JQuery中checkbox选择器

    今天我们讲的是如何选择HTML网页中CheckBox选择器 如下图,是几个checkbox <input type='checkbox'checked="checked"/& ...

  4. 自己从0开始学习Unity的笔记 IV （C#循环练习输出素数）

    来测试一下循环....刚刚学了while循环,测试一下输出1-100的素数 我想了一下,素数就是只能被1和本身整除,那就是只能被整除2次,我是顺着这个思路写的代码,如果被整除超过2次,那么肯定不是素数 ...

  5. windows 10 RelativePanel

    The new RelativePanel implements a style of layout that is defined by the relationships between its ...

  6. WEB H5 JS QRCode二维码快速自动生成

    万能的GITHUB: https://github.com/davidshimjs/qrcodejs HTML: <div class="col-xs-10 col-xs-offset ...

  7. LOJ#6038. 「雅礼集训 2017 Day5」远行（LCT）

    题面 传送门 题解 要不是因为数组版的\(LCT\)跑得实在太慢我至于去学指针版的么--而且指针版的完全看不懂啊-- 首先有两个结论 1.与一个点距离最大的点为任意一条直径的两个端点之一 2.两棵树之 ...

  8. Linux下安装pip（遇到了python2.6升级为python2.7道路上的坑，原因已经找到，只差临门一脚了，以后补上）

    1.先说一下什么是pippip 是“A tool for installing and managing Python packages.”,也就是说pip是python的软件安装工具2.下面介绍怎么 ...

  9. [Objective-C语言教程]命令行参数（23）

    执行时,可以将一些值从命令行传递给Objective-C程序. 这些值称为命令行参数,很多时候它们对程序很重要,特别是当想要从外部控制程序而不是在代码中对这些值进行硬编码时就很有用了. 命令行参数使用 ...

  10. mxonline实战10，课程列表页，课程详情页1

    对应github地址:第10天   一. 课程列表页   1. 拷贝course-list.html到templates目录中 2. 编写url和view 在courses/views.py中新加