zoukankan      html  css  js  c++  java
  • 如何解决两个li之间的缝隙

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

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

    HTML如下:

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

    CSS如下:

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

    显示的效果如下:

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

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

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

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

    总结如下:

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

  • 相关阅读:
    requirejs小记
    backbone入门
    简单的javascript/css slider滑动条
    又一个简单试用的javascript Slider插件
    Hdu3926 Hand in Hand
    今天OJ升级的学习内容总结
    非常实用的PHP代码片段
    第一次面试经历
    PHP Filesystem 函数
    MFC实现 MSN QQ 窗口抖动
  • 原文地址:https://www.cnblogs.com/caojiayan/p/5949641.html
Copyright © 2011-2022 走看看