这次给大家带来怎样使用li进行水平排列,使用li进行水平排列的注意事项有哪些,下面就是实战案例,一起来看一下。
li水平排列
- 我是第一个li
- 我是第二个li
- 我是第三个li

这样会有一个问题给li的宽度设置为33%,三个li标签的宽度居然超过了一行,有一点很明显就是li标签直接多了一点空白。
一、浮动
首先想到的是浮动,给li增加样式float:left。

效果如上,这样的方式,浮动会有一个问题,就是li的浮动使得ul的高度为0,解决这问题,有三种方法:
1、给ul增加height高度,但是这样不能做到自适应。
2、清楚浮动的影响,在最后的li标签后面增加一个空的p,
(个人推荐,但是觉得代码维护上也不是很好。)
3、对ul增加zoom属性,貌似只适应与ie(我没研究)。

二、将li标签写成一行
- 我是第一个li
- 我是第二个li
- 我是第三个li
很奇怪为什么这样就正常了,暂时很难理解。

三、给ul增加样式去掉li标签之间空白
给ul增加font-size:0样式可以去除li标签之间的空白。这样有点需要注意的就是需要重新设置li标签的字体大小。

相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!
推荐阅读:










