html li,div的几种排列方法

最新推荐文章于 2023-05-27 11:08:03 发布

干饭人阿张

最新推荐文章于 2023-05-27 11:08:03 发布

阅读量2.5k

点赞数 1

分类专栏：初学者文章标签： html5 css3

本文链接：https://blog.csdn.net/weixin_66107154/article/details/124440442

版权

初学者专栏收录该内容

23 篇文章 0 订阅

订阅专栏

li第一种排列方法<浮动挤排列>顾名思义就是把一部分文字图片或一个模块给挤下去

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
		*{padding: 0px;
		  margin: 0px;
		  list-style:none;
		  text-decoration:none;
		  }
		</style>
	</head>
	<body>
		<ul>
			<li><img src="img/01.jpg"><br>
			<a href="">三星手机GT-I8552(釉白） 4.7英寸屏幕+四核1.2GHz CPU+1G RAM+双卡双待。</a></li>
			<li><img src="img/02.jpg"><br>
			<a href="">小米手机红米(灰色)移动版 红米手机。</a></li>
			<li><img src="img/03.jpg"><br>
			<a href="">苹果 手机 iPhone5S （16GB）（金）。</a></li>
			<li><img src="img/04.jpg"><br>
			<a href="">三星 手机 I9500 (皓月白) 2GB强大运行内存，5.0英寸全高清屏，1300万像素摄像头。</a></li>
		</ul>
	</body>
</html>

先设置浮动让他浮动到一起（一行装的下的话就在一行，装不下就在多行）建议右浮动因为运行时是从前往后的如果左浮动位置会颠倒

 li{
			  float: left;
		  }

设置大小可以设置大框架的长度和小框架的长度或用所占百分比我这里是用百分比

li{
			  float: left;
			  width: 50%;
		  }

第二种display方法他的一个属性叫display: -webkit-box;改变原有属性，让他连在一起但他只会占一行如果东西太多会自动拓宽 display还有其他属性大家可以自行百度

在初始代码加这一行就会使这个ul里面的li都排在一行

ul{
				  display: -webkit-box;
			  }

因为我设置的是ul这一块的所以只排列这一块同理我只需要把他分成两个ul就欧克了

原代码

新的

       <ul>
			<li><img src="img/01.jpg"><br>
			<a href="">三星手机GT-I8552(釉白） 4.7英寸屏幕+四核1.2GHz CPU+1G RAM+双卡双待。</a></li>
			<li><img src="img/02.jpg"><br>
			<a href="">小米手机红米(灰色)移动版 红米手机。</a></li>
		</ul>
		<ul>
			<li><img src="img/03.jpg"><br>
			<a href="">苹果 手机 iPhone5S （16GB）（金）。</a></li>
			<li><img src="img/04.jpg"><br>
			<a href="">三星 手机 I9500 (皓月白) 2GB强大运行内存，5.0英寸全高清屏，1300万像素摄像头。</a></li>
		</ul>

运行结果

我们在修饰ul，li的宽度和其他想要的效果就可以了

            ul{
				width: 400px;
				display: -webkit-box;
				margin: 10px auto;
				
			}
			li{
				width: 50%;
				width: 200px;
			}

本人也是小白一个刚学没多久也没学太深其他的方法欢迎补充一起进步如有疏漏请指正当然我也会慢慢学慢慢补充我们山顶见

干饭人阿张

关注

1
点赞
踩
13

收藏

觉得还不错? 一键收藏
0
评论
html li,div的几种排列方法

li第一种排列方法<浮动挤排列>顾名思义就是把一部分文字图片或一个模块给挤下去<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> *{padding: 0px; margin: 0px; list-style:none; text-d
复制链接

扫一扫