怎样使用li进行水平排列

互联网 18-6-4

这次给大家带来怎样使用li进行水平排列，使用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>