怎样使用li进行水平排列

!DOCTYPE htML>
    html lang="en">
    head>
    	meta charset="UTF-8">
    	meta content="width=device-width, inITial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
    	title>
    li水平排列/title>
    	style>
	html{
    		font-Size: 20px;
	}
	@media only screen and (min-width: 320px){
    html{
    font-size: 20px !important;
}
	}
	@media only screen and (min-width: 350px){
	    html{
    font-size: 22.5px !important;
}
	}
	@media only screen and (min-width: 365px){
	    html{
    font-size: 23px !important;
}
	}
	@media only screen and (min-width: 375px){
	    html{
    font-size: 23.5px !important;
}
	}
	@media only screen and (min-width: 390px){
	    html{
    font-size: 24.5px !important;
}
	}
	@media only screen and (min-width: 400px){
	    html{
    font-size: 25px !important;
}
	}
	@media only screen and (min-width: 428px){
	    html{
    font-size: 26.8px !important;
}
	}
	@media only screen and (min-width: 432px){
	    html{
    font-size: 27.4px !important;
}
	}
	@media only screen and (min-width: 481px){
	    html{
    font-size: 30px !important;
}
	}
	@media only screen and (min-width: 569px){
	    html{
    font-size: 35px !important;
}
	}
	@media only screen and (min-width: 569px){
	    html{
    font-size: 40px !important;
}
	}
	body{
    		margin: 0;
    		padding: 0;
	}
	ul{
    		width: 100%;
    		margin: 0.3rem 0;
    		padding:0.3rem 0;
    		border-top:0.05rem solid #ccc;
    		border-bottom: 0.05rem solid #ccc;
	}
	li{
    		width: 33%;
    		list-style-type: none;
    		display:inline-block;
    		font-size: 0.8rem;
    		border-left: 0.05rem solid #ccc;
    		text-align: center;
	}
    	/style>
    /head>
    body>
    	ul>
    		li>
    我是第一个li/li>
    		li>
    我是第二个li/li>
    		li>
    我是第三个li/li>
    	/ul>
    	/body>
    /html>
    

这样会有一个问题给li的宽度设置为33%，三个li标签的宽度居然超过了一行，有一点很明显就是li标签直接多了一点空白。

一、浮动

首先想到的是浮动，给li增加样式float:left。

效果如上，这样的方式，浮动会有一个问题，就是li的浮动使得ul的高度为0，解决这问题，有三种方法：

1、给ul增加height高度，但是这样不能做到自适应。

2、清楚浮动的影响，在最后的li标签后面增加一个空的p，p style="clear:both; "> （个人推荐，但是觉得代码维护上也不是很好。）

3、对ul增加zoom属性，貌似只适应与ie（我没研究）。

二、将li标签写成一行

ul>
li> 我是第一个li/li> li> 我是第二个li/li> li> 我是第三个li/li>
/ul>

很奇怪为什么这样就正常了，暂时很难理解。

三、给ul增加样式去掉li标签之间空白

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

相信看了本文案例你已经掌握了方法，更多精彩请关注其它相关文章！

推荐阅读：

怎样使用javascript Date Format方法

如何使用Zepto tap事件的穿透与点透（附代码）

以上就是怎样使用li进行水平排列的详细内容，更多请关注其它相关文章！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！