为了账号安全,请及时绑定邮箱和手机立即绑定

课程

\

关注
qq_霉霉_14193196

为什么我给content 加了 margin-right:-32px 没有起作用呢,怎么解决

https://img.mukewang.com/5d4d34ad0001bcf822471132.jpg

//清除浮动

.clearfix{

&:after{

content:"";

display: block;

clear: both;

}

zoom:1;

}


.fl(@fl:left){

float:@fl;

}

.box{

@box_w:616px;

width:@box_w;

background-color: green;

margin-right:-32px;

.item{

@h:164px;

@w:130px;

@mr:32px;

.fl();

color:black;

height: @h;

width:@w;

text-align: center;

margin-right: @mr;

background-color: blue;

}


2019-08-09 123 浏览 2 回答

因为你 margin-right: -32px的元素没有父元素

所有代码如下:

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <title>Document</title>

  <style>

    .main {

      width: 616px;

      height: 300px;

      background-color: red;

    }

    .item-box {

      /* 通过margin-right 变大item-box宽度,但必须有父元素 */

      margin-right: -32px;

      height: 200px;

      background-color: blue;

    }

    .item {

      width: 130px;

      height: 100px;

      float: left;

      margin-right: 32px;

      background-color: green;

    }

  </style>

</head>

<body>

  <div class="main">

    <div class="item-box">

      <div class="item"></div>

      <div class="item"></div>

      <div class="item"></div>

      <div class="item"></div>

    </div>

  </div>

</body>

</html>


2019-08-14
回复 0

所示图片https://img1.mukewang.com/5d541a30000124af14180730.jpg

2019-08-14
回复 0

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信