换行符引发的margin问题

来源:互联网 发布:管家婆备份数据库布 编辑:程序博客网 时间:2024/05/22 00:21

如下HTML代码:

 <ul>        <li>12345</li>        <li>12345</li>        <li>12345</li>        <li>12345</li>        <li>12345</li>    </ul>

则将li设置属性display:inline-block后,li之间会有一些间隙,Chrome下为6px ,为消除这些间隙,可以采用以下方式:

  • 暴力将回车删除
  • 采用负margin
  • 设置ul的font-size为0后,重新设置li的font-size
  • 将HTML写成下面的格式:
 <ul>        <li>12345</li><li>        12345</li><li>        12345</li><li>        12345</li><li>        12345</li>    </ul>
  • 不写li的闭合标签,浏览器会自动加上,并没有回车。
原创粉丝点击