display:inline-block

标签display:inline-block;后会出现空隙。

以前遇到的这个问题一般我会用float代替inline-block;

另外就是标签之间的空格去掉。压缩代码也可以去掉左右的间隙。

====================================

http://www.zhangxinxu.com/wordpress/?p=1194

http://90du.es/2012/04/fighting-the-space-between-inline-block-elements/#more-1363

马老板的例子

html:
<ul class="list">
      <li>tab1</li>
      <li>tab2</li>
      <li>tab3</li>
      <li>tab4</li>
      <li>tab5</li>
   </ul>
css:
body { font: 12px/1.5 simsun; }
      ul { list-style: none; }
      ul.list { -webkit-text-size-adjust: none; font-size: 0; letter-spacing: -8px; }
      ul.list li { display: inline-block; *display: inline; zoom: 1; width: 100px; text-align: center; border: 1px solid red; font-size: 12px; letter-spacing: 0; padding: 10px; }

你可能感兴趣的:(inline-block)