li的水平排列问题

最新推荐文章于 2023-11-24 18:39:44 发布

jl2577

最新推荐文章于 2023-11-24 18:39:44 发布

阅读量5.4k

点赞数

分类专栏： css3 文章标签： css

本文链接：https://blog.csdn.net/angeljsl/article/details/47724625

版权

css3 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

涅槃总是痛苦的，什么都得重新开始。

最近在开始转前端，学习css。在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>