<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        li{

            list-style: none;

            width: 100px;

            height:20px;

            border:1px solid #ff0000;

            display: inline-block;

            text-align: center;

        }

    </style>

</head>

<body>

    <ul id="ul">

        <li>1</li>

        <li>2</li>

        <li>3</li>

        <li>4</li>

    </ul>

<body>

</head>

这样的代码会产生如下图所示的间隙问题

解决方法有很多，可以通过调整margin为负值来解决，也可以通过其他的方法，但是我最喜欢的是这种方法

<ul id="ul">

        <li>1</li

        ><li>2</li

        ><li>3</li

        ><li>4</li>

    </ul>

闭合标签放在下行的开头，或者是通过注释来解决

<ul id="ul">

        <li>1</li><!--

        --><li>2</li><!--

        --><li>3</li><!--

        --><li>4</li>

    </ul>

亲测在浏览器下支持良好,ie6/7/8都OK的，但是有同学会说：display在ie6/7无效。那么请看我的上一篇决解display:inline-block的兼容问题

解决css中display:inline-block产生的空隙问题的更多相关文章

  1. 解决css中display:inline-block的兼容问题

    *display:inline; *zoom:1; 不多说,ie6/7直接在元素添加以上的属性即可.

  2. 区别CSS中display：box；inline；none以及HTML中 <frame> 标签<table> 标签的 frame 属性

    区别display:box:display:inline:display:none三者的不同 display:block的特点是: block是Display默认的值.总是在新行上开始:该对象随后的内 ...

  3. CSS中display:block的使用介绍

    在CSS的规定中,每个页面元素都有一个display的属性,用于确定这个元素的类型是行内元素,还是块级元素: (1)行内元素:元素在一行内水平排列,依附于其他块级元素存在,因此,对行内元素设置高度.宽 ...

  4. 大话css之display的Block未解之谜（一）

    用了几年的css了,css中inline | block |inline-block|table|flex从来没有做过系统的整理和分析,网上的分析文章也很多,零散. 今天有空,就在这做一下整理分析 b ...

  5. 解决CSS中float:left后需要clear:both清空的繁琐步骤(转)

      之前,因为公司专门有CSS+DIV的切片设计师,所以我一直都是注重程序的设计与开发.现在,因为接了一些Web网站的项目需要制作,就在空闲时间学习起了CSS.Jquery. 现在,大部分的横排导航都 ...

  6. 解决CSS中float:left后需要clear:both清空

    现在,大部分的横排导航都是通过 ul -> li *n -> a 来实现的.具我所知,要达到这种效果,有几种方法可以实现. 1.传统处理方式: li {float:left;}/*这样,对 ...

  7. 解决 IE7 中 display:inline-block 失效的问题

    我们在做首页菜单选项的时候,通常会用 li 标签去做,通过对 li 标签设置样式: display:inline-block 可以让 li 标签横排显示.但是这样做,在 IE7 浏览器下面会有一个兼容 ...

  8. Css中display:inline-block用法详解

    display:block就是将元素显示为块级元素 block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都可控制: 宽度缺省是它的容器的100%,除非设定一个宽度 <div&g ...

  9. display:inline block inline-block 的区别

    原文地址:http://blog.csdn.net/jly036/article/details/5506182 display:block就是将元素显示为块级元素. block元素的特点是: 总是在 ...

随机推荐

  1. How2j学习java-2、用命令行中编写第一个 JAVA 程序

    真正在工作中开发 java 应用都会使用eclipse,myeclipse, IntelliJ等等 使用最原始的命令行方式来执行Hello World 1.准备项目目录 在e: 创建一个project ...

  2. [CISCN2019 华北赛区 Day1 Web1]Dropbox

    0x01 前言 通常我们在利用反序列化漏洞的时候,只能将序列化后的字符串传入unserialize(),随着代码安全性越来越高,利用难度也越来越大.但在不久前的Black Hat上,安全研究员Sam ...

  3. iOS开发之通过Framework建立项目依赖

    https://www.jianshu.com/p/d146db167bf3 项目开发时经常会遇到个别模块想打包成framework的情况,传统的打包方式太繁琐,反复测试时很麻烦,不如一个项目管理来得 ...

  4. 【代码总结】PHP面向对象之接口与多态性应用

    概述: PHP之支持单继承,也就是说每个类智能继承一个父类.当声明的新类继承抽象类实现模板以后就不能再有其他问题,为了解决这个问题,PHP引用了接口 ------------------------- ...

  5. BUG搬运工：CSCvp31778-3802 apsw_watchdog: WARNING: System memory is running low

    如下bug主要针对Cisco COS AP比如18.28.38... 主要现象: AP上连关联的终端显示的是信号满格,但是无法访问内网,所有的终端都这样,只有重启AP后才可以解决. 频率: 这种现象有 ...

  6. 转载和补充：Oracle中的一些特殊字符

    oracle通配符,运算符的使用 用于where比较条件的有: 等于:=.<.<=.>.>=.<> 包含:in.not in exists.not exists 范 ...

  7. Python基础语法笔记2

    ------------------------------------------------------------------------------- 常量和Pylint的规范 1.常量:常量 ...

  8. 一个简单insert 语句执行 40ms 原因剖析

    背景:一个简单的带有主键的insert 语句,居然要 40ms ,开发受不了,要求降低 因此我们要关注的的 数据从插入落地的IO 中间都干了什么 一.MySQL的文件 首先简单介绍一下MySQL的数据 ...

  9. 人工神经网络(从原理到代码） Step 01 感知器 梯度下降

    版权声明: 本文由SimonLiang所有,发布于http://www.cnblogs.com/idignew/.如果转载,请注明出处,在未经作者同意下将本文用于商业用途,将追究其法律责任. 感知器 ...

  10. Codeforces1140D. Minimum Triangulation

    题目链接 本题是区间dp里的三角剖分,板子题,dp[i][j]表示凸多边形i-j构成的最值,转移方程为dp[i][j] = min/max(dp[i][k]+dp[k][j]+w[i,j,k])(i& ...