欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

怎样使用li进行水平排列

程序员文章站 2022-03-19 07:51:36
...
这次给大家带来怎样使用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>

怎样使用li进行水平排列

怎样使用li进行水平排列

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

一、浮动

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

怎样使用li进行水平排列
怎样使用li进行水平排列

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

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

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

3、对ul增加zoom属性,貌似只适应与ie(我没研究)。

怎样使用li进行水平排列

怎样使用li进行水平排列

二、将li标签写成一行

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

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

怎样使用li进行水平排列

怎样使用li进行水平排列

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

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

怎样使用li进行水平排列怎样使用li进行水平排列

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

推荐阅读:

怎样使用javascript Date Format方法

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

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