工作中经常遇到的坑以及解决的办法（一），欢迎光临！

相信大家在敲代码的过程中，会遇到无数的坑，不要悲伤，不要气馁。俗话说，坑就是经验。嗯，没错，俗话是我说的。闲言少叙，本文为长篇小说，致我们代码中的坑，以及一些常用的小方法，会逐步写下，欢迎您的到来，下面开始正题：

1.  比如说，现在需要实现一个这样的效果：

在首页的右上方，有为数较多的网页都会有这个，例如百度，活生生的例子哈

也就是一个ul ， 里面众多的li ， li里面可能有a标签啊，因为都是需要点击事件的嘛，

我们知道正常的ul是垂直排列的，那么我们怎么让一个ul变成这样实际效果呢，当当当当：

给你的ul设置一个向右的浮动，然后就可以通过margin调节整个ul的具体位置，list-style：none去掉 各个li前面的小圆点，

给你的li一个向左的浮动，然后就老老实实的从垂直排列变为了水平排列，怎么样，听不听话，

再通过padding调节各个li之间的距离，是不是美美的

如果有需要，写了a标签的话,那么可以通过如图的方法去掉a标签下文字的下划线,还可以用color设置文字的颜色，怎么样，是不是很简单

2.比如说我们要给一个span添加背景图片，css方法background:url("图片路径") no-repeat;我们还需要对这个图片进行位置的改变

那么我们就需要给当前的span设置为行内块元素或者块元素（视具体情况而定），也就是display:inline-block和display:blcok，

还需要给span设置具体的宽和高，这个时候才可以.

3.底部的信息对齐，比如这样：

一个很常见的底部信息，也就是多个ul的集合  ,我们可以写一个父级的div，所有的ul都写在一个div里，按顺序写好，

这时,我们的div就可以看做上面第一个效果中的ul，而众多的ul看做li，

把div向右浮动，ul向左浮动，然后就是调距离了，思路非常清晰。

好了，第一期就这样结束了，怎么样，满满的干货不是,希望看过了的你也会有所收获，谢谢光临！