如何解决两个li之间的缝隙的问题:

在做一个类似按钮左右滑动的选择器的动效,遇到了个是关于li之间的缝隙的问题:

HTML如下:

<span class="c1mChanger">
<ul>
<li>仅产品</li>
<li>仅商品</li>
</ul>
</span>

CSS如下:

.c1mChanger{
width: 120px;
height: 30px;
}
.c1mChanger ul{
width:120px;
height: 30px;
}
.c1mChanger ul li{
display: inline-block;
text-align: center;
line-height: 30px;  
}
.c1mChanger ul li:first-child{
border: 1px solid #;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
}
.c1mChanger ul li:last-child{
border: 1px solid #;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
}
 

显示的效果如下:

aaarticlea/png;base64,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" alt="" />

明显两个li之间有一个缝隙,经过仔细检查发现有如下3种解决方式:

1、在css样式里要使用margin:0;padding:0去除浏览器的默认值;     *{margin:0;padding:0;}      /*通配符margin和padding都设为0*/

2、在li设置:float: left;  list-style: none;

3、那个距离可能是空白节点,可以把li连着写,不要换行

总结如下:

保险起见,最好是三者都写上。

如何解决两个li之间的缝隙的更多相关文章

  1. fontsize可以解决img标签插入图片之间的缝隙

    当我们用img标签连续插入多张图片的时候,图片和图片之间会出现缝隙,通常我们的做法是用DIV将图片包起来进行浮动来解决这个问题,但是还有一种解决方法是在img的父级元素里面设置font-size:0来 ...

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

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

  3. EF数据存贮问题二之“无法定义这两个对象之间的关系,因为它们附加到不同的 ObjectContext 对象”

    “无法定义这两个对象之间的关系,因为它们附加到不同的 ObjectContext 对象”,这是在EF中,一对多关系表,有外键的类保存至数据库中出现的错误. 我原来是用JAVA开发的,习惯性的处理一对多 ...

  4. 用Python实现gmail邮箱服务,实现两个邮箱之间的绑定(中)

    这篇博客,主要讲解用Python实现邮箱服务的几个需要学习的模块:E-mail Compotion and Decoding(邮件生成和解析).SMTP.POP.IMAP 如上篇博客所讲,我学习过程参 ...

  5. dpkg: error: -i (--install) 和 -i (--install) 两个操作之间有矛盾

    1 错误描述 youhaidong@youhaidong-ThinkPad-Edge-E545:~$ sudo dpkg -i -i WineQQ2013-20131120-Longene.deb [ ...

  6. 两个css之间的切换

    需求: 头部两个按钮 两种样式之间的切换 解决办法: 结合JQ  三目运算 来处理 第一步: 把需要切换的样式设置为样式里背景,这样做的目的为了避免 js里出现过多 css代码 二来这样会显得更加的清 ...

  7. SQL 获得两个时间段之间的数据

    一般保存在数据库中的日期精度很高,比如'2014-04-15 16:31:22.000' 而一般用户选择的时间精度是精确到日的,比如'2012-04-15' 所以你想取出两个日期之间的数据,如果用下面 ...

  8. C# 获取两个时间段之间的所有时间与获取当前时间所在的季度开始和结束时间

    一:C# 获取两个时间段之间的所有时间 public List<string> GetTimeList(string rq1, string rq2) { List<string&g ...

  9. div和img之间的缝隙问题

    这次做的项目,客户说.banner图的上下之间不要留有空隙,细致一看才发现,上下居然都有空隙.审查元素,发现全部的div,img的padding和margin都是0,对于这个间隙到底是假设产生的真的是 ...

随机推荐

  1. 安卓自动化测试工具一:Monkey

    一:monkey的用途:主要用于稳定性测试,模拟用户操作 二.monkey的基本使用 monkey文档地址:"<android_sdk>/docs/tools/help/monk ...

  2. package com.sun.image.codec.jpeg does not exist

    rt.jar 是sun公司内部使用的包,不建议外部使用,rt.jar是被用了的,但是里面的com.sun下面的包不被默认加载了, JAVA7之前是默认加载的,所有用JAVA7以前的JDK编译是通过的. ...

  3. Mutex的使用方法以及封装的AutoLock介绍(转载)

    Mutex-互斥类 互斥类-MutexMutex是互斥类,用于多线程访问同一个资源的时候,保证一次只有一个线程能访问该资源.在<Windows核心编程>①一书中,对于这种互斥访问有一个很形 ...

  4. vs 插件

    Visual Assist 代码提示 Indent Guides

  5. 安装用户脚本的福音:Tampermonkey(油猴)

    一直都知道网络的强大,NB的程序员大牛潜伏在我们身边.但是一直以来,如果想使用的一些特殊用途的浏览器插件都无法安装,今天被大神级的师兄给秒到了,原来这世上还有一个免费的用户脚本管理器,有了用户脚本管理 ...

  6. USB硬盘 raw之后,DiskGenius 恢复

    最近,为了在E560上安装LINUX(先是gentoo,后是rhel7,最后是 centos7),用UltralISO 把一块移动硬盘给写成RAW格式了.现在又想把移动硬盘给恢复回去.采用一些方法,效 ...

  7. CSS3 六边形绘制

    把一个104px的div放在它们之间,设置一个背景颜色: width: 0; border-bottom: 30px solid #6C6; border-left: 52px solid trans ...

  8. CodeForces 711C Coloring Trees

    简单$dp$. $dp[i][j][k]$表示:前$i$个位置染完色,第$i$个位置染的是$j$这种颜色,前$i$个位置分成了$k$组的最小花费.总复杂度$O({n^4})$. #pragma com ...

  9. Java多线程的信号量

    Java的信号量主要的作用是控制线程对资源的访问例如我一个线程池里面有100个线程等待执行,但是我允许最多同时运行5个线程,这5个线程只有其中一个线程执行完毕后,在线程池中等待的线程才能进入开始执行, ...

  10. HDU 1040 As Easy As A+B(排序)

    As Easy As A+B Problem Description These days, I am thinking about a question, how can I get a probl ...