<!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产生的空隙问题
原文：http://www.cnblogs.com/vivenZ/p/6411724.html