这篇博客主要是讲如何解决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;即可解决。