现象

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

情况1

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

<ul>
<li>xxx</li>
<li>xxx</li>
</ul>

<ul>
<li>xxx</li> <li>xxx<li>
<ul>

情况2

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

<ul>
<li>xxx</li><li>xxx</li>
</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. spring boot的对象注入

    1 需求 现在我们的项目中需要引入一个java类库,我想要很方便的使用该类库中的一个类,并且我想要创建这个类的一个单例对象.然后可以很方便的在各个模块中用@AutoWired进行对象注入. 比如一个配 ...

  2. iOS框架你了解多少?

    1.iOS 系统可以分为以下四层,每个框架对应IOS系统里的一层,每层建立在它下面层的上面.应该尽量使用上层的框架来代替下面的框架.更高层次的框架是对底层框架基于对象的抽象.以下列出几个iOS开发的常 ...

  3. 我的Android进阶之旅------>关于android:layout_weight属性的一个面试题

    最近碰到一个面试题,按照下图,由Button和EditText组成的界面下厨布局代码,解决这题目需要使用android:layout_weight的知识. 首先分析上图所示的界面可以看成一下3个部分. ...

  4. Symfony 没有找到数据库驱动An exception occured in driver: could not find driver

    如果一直报这个错误, 第一,你本地没有相关的数据库驱动(mysql:-->pdo_myql,postgresql-->pdo_pgsql等); 需要执行 php -m|grep -i pd ...

  5. SAP 定价

    近几天做门店团购销售订单上传SAP接口程序,SO创建测试过程中, 遇到定价问题,同事在定价过程的增强过不了. VOFM 了解到定价过程是个非常复杂的环节,此处出现程序处理过程中ZMP0定价条件下的价格 ...

  6. Struts2学习总结(完整版)

    一.搭建struts2环境 1.jar包的导入 主要是到 解压其中的一个工程,得到里面lib下包含的jar包 把这里的所有的jar包拷贝到项目的 WEB-INF目录下的lib文件夹下面. 2.配置st ...

  7. 纪念下自学QT 第十天 终于写成了串口调试助手

  8. Redis缓存全自动安装shell脚本

    我只是把命令放到shell文件中了,方便安装,代码如下: #!/bin/bash # shell的执行选项: # -n 只读取shell脚本,但不实际执行 # -x 进入跟踪方式,显示所执行的每一条命 ...

  9. 【FLASK模板】set,with语句

    # set with 语句 ###set语句:在模板中, 可以使用 ‘set’语句来定义变量, 实例如下: <body> {% set username='zhiliaoketang' % ...

  10. 第二篇 javascript一维数组和二维数组及方法

    一.数组 什么是数组 程序=数据+算法 数组就是一种很常见的保存批量数据的数据结构 一.定义数组 var arr1=[]; //定义了一个不包含元素的数组 ,,]; //定义了一个包含三个元素的数组 ...