为什么我的这个练习代码里,li 元素中间会多出来一部分空隙。这个是如何产生的呢?

来源:5-5 CSS3背景 制作导航菜单综合练习题

zozorz

2016-04-18 16:36

这个空隙如何取消掉呢?

截图

http://take.ms/8NHKB

练习代码

codepen

写回答 关注

3回答

  • 慕斯9627782
    2016-06-06 11:41:15

    第一个<li>会相对<ul>缩进一定的像素,是<li>自带的<padding>属性。所以一般写网页的时候,会在先初始化样式,最简单的就是在CSS里面先写一个*{margin:0;padding:0;}

  • 勇敢的心9
    2016-04-20 22:05:51

    你设置的这个::before 产生的效果,在盒子之间造成间隙

    zozorz

    是的,通过 ::before添加元素进去后产生了间距。但这个是因为元素的 margin 造成的吗?还有一个没搞懂的是before 的css 中已经设置了 position:absolute。理论上应该不会由于 margin 影响到两边的 li 才是

    2016-04-22 00:52:59

    共 1 条回复 >

  • 勇敢的心9
    2016-04-18 21:11:31

    在 .nav-bar ul li 加如下代码,不知道是不是你要的效果,我是新手,不喜勿喷

     margin-left:-5px

    zozorz

    呵呵,谢谢你的热心回答。通过 margin-left:-5px 是可以让消除空隙。不过我的疑问是根据盒模型,通过属性设置,这个空隙到底是怎么产生的。

    2016-04-20 19:40:47

    共 1 条回复 >

十天精通CSS3

本课程为CSS3入门教程,深刻详解CSS3知识让网页穿上绚丽装备

242555 学习 · 2623 问题

查看课程

相似问题