网页设计必备技能：让li如虎添翼，横向排列技巧大揭秘

在网页设计中 li 很常见，咱们今天要学的就是怎么用它来排列文字。不过别急，后面会详细讲解哪些需要注意的地方，这样你就能把这项技能牢牢握住。

nbsp;html>
	
	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;
	}
	

一、浮动

拿li做横向排列？浮动好帮手~弄点style=”float:left”，搞定多行li一列排。可是ul高度竟然谜之消失了，看着特不顺眼。为解决此困扰，有三个小妙招供你任选其一：

给ul添个高度呗：这样浮起来的时候不会变成零，问题是没法自适应，有点不方便。

去掉多余的泡泡：在最后那个li标签后加个空白的

这个小技巧能解决浮标乱跳的问题。虽然很实用，但以后代码修改会有些麻烦。

让ul有个缩放效果吧：可惜这个只能在IE上用，其他浏览器就享受不到了。

二、将li标签写成一行

有木有发现，有些时候，一大串’li’标签挤在同一行居然也能显示得挺好。原因在于，’li’本身就是个块状元素，这么堆放的话，就没什么太大的空隙喽!

三、去除li标签之间空白

看见li标签之间多了空格？那就给ul添个style -缩放字体到0，一下子就把空白去除。但别忘记复位li的字号要不文章可看不清楚。

记住这些模型和小窍门，你肯定能熟练运用li来做出令人满意的水平布局。当你在以后做网页设计或前端开发时遇到麻烦，别忘了去翻翻那些专业的技术网站或博客！

。