现象

对于ul下li排成一行的布局(即li的display由list-item设为inline-block):

情况1

如果这些li在书写的时候有换行或者有空格,且ul本身的font-size不为0,那么li左右之间会有空隙:

  1. <ul>
  2. <li>xxx</li>
  3. <li>xxx</li>
  4. </ul>

  1. <ul>
  2. <li>xxx</li> <li>xxx<li>
  3. <ul>

情况2

如果li书写的时候不换行也无空格,那么li左右之间空隙消失

  1. <ul>
  2. <li>xxx</li><li>xxx</li>
  3. </ul>

情况3

如果ul的font-size设为0,那么无论li换不换行,空隙都会消失

结论

ul的font-size会控制li之间的空格大小。只有将ul的font-size设为0, 换行着写的li之间才不会有空格。

对策

考虑到代码可读性,还是选择正常方式换行写li。

然后为了精确控制li之间的间距,应该将ul的font-size设为0,然后为li设置marge,如margin:0 2.5px。

排成一行的li之间的间隙问题的更多相关文章

  1. li之间的间隙问题

    1.间隙是有代码格式中的换行符产生,对代码进行压缩处理或手动删除换行就好:

  2. img和div的宽度不一样问题和li之间空隙问题的解决方案

    img和div宽度不一致问题 今天写代码,遇到一个小问题,我把一张图片放进一个div里,然后没有设置任何的padding和margin,但是发现图片和div的高度不一样,在img的下方出现了3px的空 ...

  3. 多个Img标签之间的间隙处理方法

    1.多个标签写在一行 <img src="/i/eg_tulip.jpg" alt="郁金香" height="100px"/> ...

  4. 去除inline-block之间的间隙

    在使用display: inline-block;时,这些inline-block之间会有间隙,根据无双 - <去除inline-block元素间的空隙>的说法,这个间隙是4px或者8px ...

  5. li 与 li 之间有空白间隔是什么原因引起的,有什么解决办法

    li 与 li 之间有空白间隔是什么原因引起的,有什么解决办法 原因 浏览器会把inline元素间的空白字符(空格.换行.Tab等)渲染成一个空格.而为了美观,我们通常是一个 放在一行,这导致 换行后 ...

  6. [原创]ie6,7中td和img之间有间隙

    情形描述 开发工具:VS2010: 浏览器版本:IE6以上,火狐,谷歌: 页面布局设计:Table+Img布局: 项目预览问题:火狐,谷歌,IE8以上未出现问题,IE6,IE7图片之间有间隙. 分析原 ...

  7. 如何解决两个li之间的缝隙

    如何解决两个li之间的缝隙的问题: 在做一个类似按钮左右滑动的选择器的动效,遇到了个是关于li之间的缝隙的问题: HTML如下: <span class="c1mChanger&quo ...

  8. GIS地理工具案例教程——批量去除多边形的之间的间隙

    GIS地理工具案例教程--批量去除多边形的之间的间隙 商务合作,科技咨询,版权转让:向日葵,135-4855__4328,xiexiaokui#qq.com 问题:几乎所有的手工生产的数据,都存在多边 ...

  9. 【Web】[原创]ie6,7中td和img之间有间隙

    情形描述 开发工具:VS2010: 浏览器版本:IE6以上,火狐,谷歌: 页面布局设计:Table+Img布局: 项目预览问题:火狐,谷歌,IE8以上未出现问题,IE6,IE7图片之间有间隙. 分析原 ...

随机推荐

  1. 九度OJ 1251:序列分割 (DFS)

    时间限制:1 秒 内存限制:32 兆 特殊判题:否 提交:166 解决:34 题目描述: 一个整数数组,长度为n,将其分为m份,使各份的和相等,求m的最大值   比如{3,2,4,3,6} 可以分成{ ...

  2. The given 'driver' ] is unknown, Doctrine currently supports only the follo wing drivers: pdo_mysql, pdo_sqlite, pdo_pgsql, pdo_oci, oci8, ibm_db2, pdo

    [Doctrine\DBAL\DBALException]                                                  The given 'driver' ] ...

  3. sql 2008数据事务日志已满处理方法

    突然发现sql 2008出现错误:数据库 'mybase_db' 的事务日志已满.若要查明无法重用日志中的空间的原因,请参阅 sys.databases 中的 log_reuse_wait_desc ...

  4. Nodejs课堂笔记-第三课 构建一个nodejs的Docker镜像

    本文由Vikings(http://www.cnblogs.com/vikings-blog/) 原创,转载请标明.谢谢! 因为一直做Linux有关的开发工作,所以不习惯在Windows平台编译和测试 ...

  5. PHP eval函数使用介绍

    eval()函数中的eval是evaluate的简称,这个函数的作用就是把一段字符串当作PHP语句来执行. 复制代码代码如下: eval("echo'hello world';") ...

  6. Shell传参的多种方式

    Shell 传参的多种方式 使用$1 $2 这种类似占位符的方式 # 命令行调用 start.sh 8080 9090 # 脚本中获取 port1=$1 # 8080 port2=$2 # 9090 ...

  7. 获取android模拟器的IP地址

    http://blog.csdn.net/yjkwf/article/details/7244632 1.输入adb devices查看加载的设备 2.使用 adb -s [设备] [命令]执行命令 ...

  8. Kattis - flippingcards 【并查集】

    题意 给出 N 对 数字 然后 每次从一对中 取出一个数字 判断 能否有一种取出的方案 取出的每个数字 都是不同的 思路 将每一对数字 连上一条边 然后 最后 判断每一个连通块里面 边的个数 是否 大 ...

  9. 配置asp.net IIS服务器遇到的问题以及详细图例解决方案

    原来配置过IIS服务,但是没有将自己的程序放在IIS服务器上,今天突发奇想,看看自己写的程序怎么样啊,能否在服务器上运行一下,说干就干,但是遇到了很多困难,今天把陪孩子过程以及遇到的问题给大家说说,希 ...

  10. 跨平台(I版到K版)迁移实践总结

           所谓跨平台迁移,对于了解openstack冷迁移过程的同学来说,其实就是手动去执行冷迁移的代码行为,当然像我这种抵制体力劳动的人,肯定会想写脚本去跑,即使不会也要边学边用. 迁移并非想象 ...