第一个例子设置margin-right无效
第一个例子里给ul设置margin-right反而下面的空袭没有了，列表往上移动了，右边的空隙也没有消除，为什么
6 回答
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>margin负值的运用-平铺</title>
</head>
<body>
<div class="box">
<div class="ul">
<div class="li">列表1</div>
<div class="li">列表2</div>
<div class="li">列表3</div>
</div>
</div>
</body>
<style>
.box {
width: 900px;
margin: auto;
background: brown;
}
.ul {
overflow: hidden;
margin-right: -60px;
}
.li {
width: 300px;
height: 300px;
background: aqua;
float: left;
margin-right: 20px;
}
</style>
</html>可以的代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>margin负值的运用-平铺</title>
</head>
<body>
<div class="box">
<div class="ul">
<div class="li">列表1</div>
<div class="li">列表2</div>
<div class="li">列表3</div>
</div>
</div>
</body>
<style>
.box {
width: 900px;
margin: auto;
background: brown;
}
.ul {
overflow: hidden;
margin-right: -60px;
}
.li {
width: 300px;
height: 300px;
background: aqua;
float: left;
margin-right: 20px;
}
</style>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{
margin:0;
padding: 0;
}
ul,li{
list-style: none;
}
#box{
width: 1200px;
margin:auto;
background: orange;
}
#ul{
overflow: hidden;
margin-right: -20px;
}
#li{
width: 386.66px;
height: 300px;
margin-right: 20px;
background: green;
float: left;
}
#bk{
background: gray;
width: 1200px;
height: 20px;
margin: 0 auto;
}
</style>
</head>
<body>
<div id="bk"></div>
<div id="box">
<div id="ul">
<div id="li">列表1</div>
<div id="li">列表1</div>
<div id="li">列表1</div>
</div>
</div>
</body>
</html>自己试下吧，我写的没问题啊
举报
0/150
提交
取消
