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

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. Replication--如何使用快照来初始化化请求订阅

    这是一篇针对新人的知识普及文章,老人慎入! 在快照发布和事务发布中,SQL Server需要使用快照来将数据库某一时间点的数据传递给订阅,快照使用BCP的机制. 首先我们需要查看和设置快照的生成目录, ...

  2. SQL LEAD()函数 LAG()函数

    lag ,lead 分别是向前,向后:lag 和lead 有三个参数,第一个参数是列名,第二个参数是偏移的offset,第三个参数是 超出记录窗口时的默认值) SQL> select id,na ...

  3. C++ windows下共享内存

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

  4. ASP.NET Core 2.0 in Docker on Windows Containers

    安装Docker for Windows https://store.docker.com/editions/community/docker-ce-desktop-windows 要想将一个ASP. ...

  5. Java容器中的元素输出

    1.容器不同于数组,容器若是想输出全部元素,可以直接利用System.out.println(collection) public class TestCollectionArrayPrint { p ...

  6. CTF中密码学一些基础

    本文作者:i春秋签约作家MAX. 凯撒密码作为一种最为古老的对称加密体制,在古罗马的时候都已经很流行,他的基本思想是:通过把字母移动一定的位数来实现加密和解密. 给大家先找两道题,来一起探讨基础密码学 ...

  7. python-----读写操作

    1. 文件的读取 注意:在windows中文件的路径是这样:C:\Users\name\mystuff .由于\u在python中表示转义如果使用此文件路径就会报错.解决方法: a.把斜杠\改为反斜杠 ...

  8. JavaScript的几种（原型）继承

    定义Foo,Bar 其中,Bar继承Foo a是Bar的实例,包含有Foo和Bar的函数和属性: function Foo(name) { this.name = name; } Foo.protot ...

  9. 架构师养成记--35.redis集群搭建

    前记:redis哨兵经验之谈.哨兵做主从切换可能要花费一两秒,这一两秒可能会丢失很多数据.解决方法之一是在java代码中做控制,try catch 到 链接断开的异常就sleep 一两秒钟再conti ...

  10. spring属性配置执行过程，单列和原型区别

    Spring配置中,采用属性注入时,当创建IOC容器时,也直接创建对象,并且执行相对应的setter方法 Student.java package com.scope; public class St ...