div+css中 四个图片在一行中间距相等,左右靠两边
发布网友
发布时间：2022-04-25 00:05
共4个回答
热心网友
时间：2022-04-22 07:11
<style>
*{margin:0;padding:0;}
ul{list-style-type:none;}
.grid{width:1000px;border:1px solid blue;height:45px;}
.grid ul{width:1008px;margin-left:-5px;}/*【主要】宽度要可以容纳四个盒子，可以比父盒子大，margin-left用负的清除掉左边的边距*/
.grid ul li{float:left;width:240px;margin:5px;border:1px solid red;height:32px;}
</style>
<div class="grid">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
热心网友
时间：2022-04-22 08:29
用last-child解决， 如.grid:last-child{margin-right:0}就可以去掉右边多出的6px，或者直接定义都可以的
热心网友
时间：2022-04-22 10:04
比如你给最后一个再加上margin-right: 0px;不就好了追问。。。。。。。。。。。。
追答<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
<style>
.list{
margin: 50px auto;
border: 1px solid #ddd;
position: relative;
width: 1000px;
}
.list div{
display: inline-block;
padding: 20px 50px;
margin: 60px;
border: 1px solid #bbb;
}
.list div:first-child{
margin: 60px 120px 60px 0;
}
.list div:last-child{
margin: 60px 0 60px 120px;
}
</style>
</head>
<body>
<div class="list">
<div>ss</div>
<div>ss</div>
<div>ss</div>
<div>ss</div>
</div>
</body>
</html>
简单的demo
建议这个东西是给你思路，demo是给你做
热心网友
时间：2022-04-22 11:55
margin: 0 auto;你用这个属性就可以了啊追问那就没有任何间距。
追答你可以用内间隙，调啊
