HTML+CSS解决ul和li的错位、换行问题

这篇博客主要是讲如何解决ul和li的一些问题，作为一个CSS大白，作者最近再做一个非常简单的导航栏（一个ul中套4个li，一行）的时候遇到了很多问题。下面将一一讲述。

问题如下：

1.ul中的li如何横向排序？

2.display:inline、inline-block、block有什么区别？

3.为何分配好100%后会换行？

4.为何ul与li会错位？

1.ul中的li如何横向排序？

解决方法：

两种，一种是给li元素的样式里面加个float:left，一种是给li元素加display:inline或display:inline-block，更推荐第二种，因为第二种不会出现更多的错位。

2.display:inline、inline-block、block有什么区别?

答：看这个英文，就知道，inline是在一行中显示，block是块的意思，表示显示可以调高度宽度的块级元素，而inline-block就是将inline和block合起来，就是可以调宽高的块级元素并且显示在一行里。（我找了好久才发现inline不可以调整高宽）

3.换行问题

答：假如有4个li，那每一个都设宽度为25%，会发现会换一行，但是设置的就是100%！那是因为间距的问题，加上一行margin:0 auto就可以了。

4.ul和li的错位问题

最后我们会发现，ul和li会横向错位一点，（我的就是左边ul比li多出来一点，右边li比ul多出来一点）

答：将ul的样式中加入padding:0px;即可解决。