弹性布局的一个小实例

最新推荐文章于 2023-11-13 21:31:36 发布

frank201113

最新推荐文章于 2023-11-13 21:31:36 发布

阅读量3.1k

点赞数 1

本文链接：https://blog.csdn.net/Handsome_fan/article/details/70046176

版权

Flex布局也叫弹性布局。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style type="text/css">
  *{
  	margin: 0;
  	padding: 0;
  }   
  li{
  	width: 50px;
  	height: 50px;
  	background: #18A15E;
  	display: inline-block;
  }

  </style>
</head>
<body>  
  <div class="wrap">
  	<ul>
  		<li></li>
  		<li></li>
  		<li></li>
  		<li></li>
  	</ul>
  </div>
</body>
</html>

这段代码的运行结果如下图：

我们会发现li使用了display:inline-block;后li之间会有边距，如何消除那些边距呢？答案是在li的父容器上使用弹性布局。

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style type="text/css">
  *{
  	margin: 0;
  	padding: 0;
  }
  ul{
  	display: flex;
  }   
  li{
  	width: 50px;
  	height: 50px;
  	background: #18A15E;
  	display: inline-block;
  }

  </style>
</head>
<body>  
  <div class="wrap">
  	<ul>
  		<li></li>
  		<li></li>
  		<li></li>
  		<li></li>
  	</ul>
  </div>
</body>
</html>

我们在ul上使用了样式display:flex;

此时li之间的边距也就消失了

frank201113

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
弹性布局的一个小实例

Flex布局也叫弹性布局。 Document *{ margin: 0; padding: 0; } li{ width: 50px; height: 50px; background: #18A15E; display: inline-block; }
复制链接

扫一扫