序列本身的顺序是上下摆放，想要左右摆放就要脱离文档流。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.ad{
width: 100%;
height: 250px;
background-color: gray;/*设置整体广告背景*/
}
ul li{
width: 180px;
height: 180px;
background-color: white;
float: left;/*设置无序序列脱离文档流*/
margin: 40px;/*设置每个序列的外边距*/
}
strong{
color: black;
font-size: 25px;
margin: 10px;
}
span{
color: green;
margin: 10px;
}
img{
position: relative;/*设置图片相对位置*/
left: 50px;/*设置距左边50像素的距离*/
}
</style>
</head>
<body>
<div class="ad">
<ul type="none">
<li>
<strong>这是一个广告</strong><br>
<span>这是对他的描述</span><br>
<img src="images/1.jpg" alt="家电" width="100px" height="100px"></li>
<li>
<strong>这是一个广告</strong><br>
<span>这是对他的描述</span><br>
<img src="images/2.jpg" alt="" width="100px" height="100px"></li>
<li>
<strong>这是一个广告</strong><br>
<span>这是对他的描述</span><br>
<img src="images/3.jpg" alt="" width="100px" height="100px"></li>
<li>
<strong>这是一个广告</strong><br>
<span>这是对他的描述</span><br>
<img src="images/4.jpg" alt="" width="100px" height="100px"></li>
<li>
<strong>这是一个广告</strong><br>
<span>这是对他的描述</span><br>
<img src="images/5.jpg" alt="" width="100px" height="100px"></li>
</ul>
</div>
</body>
</html>
1158
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
