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

1、给一个浮动。

2、设置display为inline。

3、设置display为inline-block。

但要追求代码量最少的话，设置为inline元素或者inline-block元素通常最为简洁：

  1. li{
  2.     display:inline;
  3. }

但是又有一个问题，inline元素设置垂直padding没用，于是inline-block发挥作用了。

  1. li{
  2.     display:inline-block;
  3. }

但是问题又来了：

每个li之间的空白怎么回事？这是由于换行符导致的，因为换行符也是一个字符，因此会有以上的空白，因此直接给font-size设为0就行了。

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title></title>
  6.         <style>
  7.             *{
  8.                 margin: 0;
  9.                 padding: ;
  10.             }
  11.             ul{
  12.                 font-size: 0;
  13.             }
  14.             li{
  15.                 display: inline;
  16.                 padding: 10px;
  17.                 text-align: center;
  18.                 font-size: 16px;
  19.                 background-color: #eee;
  20.                 list-style: none;
  21.             }
  22.         </style>
  23.     </head>
  24.     <body>
  25.         <ul>
  26.             <li>item1</li>
  27.             <li>item2</li>
  28.             <li>item3</li>
  29.             <li>item4</li>
  30.             <li>item5</li>
  31.             <li>item6</li>
  32.         </ul>
  33.     </body>
  34. </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. Ubuntu 16.04.2 LTS 安装 jdk1.6 和 tomcat6 （一）

    java和tomcat环境配置已经有很多教程和文章,最近项目需要配置Ubuntu 16.04.2下的古老的java6和tomcat 6,遇到小坑,特记录和分享. 网上的教程不是太新,就是太老,还有一些 ...

  2. jquery点击页面其他位置隐藏div

    $("#btnAdd").on('click', function (e) { $("#setUp").toggle(); $(document).one('c ...

  3. 回去看linux的指令2

    SYNC CL : MSM8953 @ CL#:12212299 PROJECT PATH : // Platform / N / NILE / COMBINATION / MSM8953 Cross ...

  4. GO学习笔记 - 数据类型转换

    官方教程:https://tour.go-zh.org/basics/13 表达式 T(v) 将值 v 转换为类型 T . 一些关于数值的转换: var i int = 42 var f float6 ...

  5. 表格Table宽度设置无效的解决方法

    表格Table宽度设置无效的解决方法 bootstrap中使用table时发现不管用width赋值方式都无法改变table>td的宽度 解决方法: 设置table:table-layout:fi ...

  6. [ActionScript3.0] 使用FileReferenceList处理多个文件上载

    package { import flash.display.Sprite; import flash.events.DataEvent; import flash.events.Event; imp ...

  7. mxonline实战8，机构列表分页功能，以及按条件筛选功能

    对应github地址:列表分页和按条件筛选     一. 列表分页   1. pip install django-pure-pagination   2. settings.py中 install ...

  8. leetcode-884-两句话中的不常见单词

    题目描述: 给定两个句子 A 和 B . (句子是一串由空格分隔的单词.每个单词仅由小写字母组成.) 如果一个单词在其中一个句子中只出现一次,在另一个句子中却没有出现,那么这个单词就是不常见的. 返回 ...

  9. leetcode-73-矩阵置零

    题目描述:   给定一个 m x n 的矩阵,如果一个元素为 0,则将其所在行和列的所有元素都设为 0.请使用原地算法. 示例 1: 输入: [   [1,1,1],   [1,0,1],   [1, ...

  10. web环境中的spring MVC

    1. web.xml文件的简单详解 在web环境中, spring MVC是建立在IOC容器的基础上,要了解spring mvc,首先要了解Spring IOC容器是如何在web环境中被载入并起作用的 ...