第一个例子设置margin-right无效-慕课网

首页课程实战体系课手记专栏慕课教程

第一个例子设置margin-right无效

来源：5-1 CSS margin负值定位

gypsy_gyq

2016-11-03 19:25

第一个例子里给ul设置margin-right反而下面的空袭没有了，列表往上移动了，右边的空隙也没有消除，为什么

写回答关注

6回答

大学霸: 2018-11-10 15:07:26

<!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>

可以的代码

0 0

大学霸: 2018-11-10 15:06:34

<!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>

0 0

破旧的时光机3662066: 2017-10-06 01:23:51

<!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 0

qq_那年时光最深记忆_0

2017-07-24 17:00:41

li的px不应该是380吗？哪来的386.66？而且设置margin-left没用啊！

1 0

破旧的时光机...

1200-40=1160/3=386.66

2017-10-06 01:23:00

共 1 条回复 >
大涧涧dry

2017-01-19 19:56:34

我的也是，是不是这个方法根本就行不通，还是我们的代码有问题，

0 0
gypsy_gyq

2016-11-03 19:30:52

原来是li的宽度设置小，宽度之和加起来必须与box的宽度相同才有效果，否则会导致错位

0 0

CSS深入理解之margin

本CSS教程带你深入讲解CSS的margin属性，解决你多年困惑

55943 学习 · 66 问题

查看课程

相似问题

宽度固定的条件下为什么margin-right设置负值不能让元素向右移动？

回答 2

第三个盒子没有出现margin-top重叠问题，请问是修复了吗？

回答 5

margin与css重叠是不是可以理解为后面设置的属性会覆盖前面的，所以两个盒子共用一个属性啊？

回答 1

请问最后一个栗子，为什么不能在<div>里加上padding-right:150px;

回答 3

margin: 50px 0; 为何只有上下是50px间距，左右无效果？

回答 3

打开慕课网App查看更多内容