问答详情
源自：5-1 CSS margin负值定位

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

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

提问者：gypsy_gyq 2016-11-03 19:25

个回答

  • 大学霸
    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
  • 大学霸
    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
  • 破旧的时光机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
  • qq_那年时光最深记忆_0
    2017-07-24 17:00:41

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

    0
  • 大涧涧dry
    2017-01-19 19:56:34

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

    0
  • gypsy_gyq
    2016-11-03 19:30:52

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

    0