css布局时,父元素margin-right设置负值不生效是怎么回事?

hanyouqing
  • 778

给正在学前端的弟弟写个demo,遇到这个问题

  • 父元素定宽

  • 自元素左浮动+magin-right

  • 一行内所有子元素的with+margin-right总和超出父元素宽度,导致每行最后一个子元素被挤到下一行

之前都是给父元素加上margin-right:-xxxpx来使父元素宽度增加解决的,现在不生效了,那位前端大神绑看下

代码:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>4-douban.html</title>
    <style type="text/css">
    *{margin: 0; padding: 0; }
    ul,ol{list-style: none;}
    a{text-decoration: none; }
    img{border:none;}
    body{background: #eee;}

    .wrap{width: 751px; height: 630px; padding-top: 5px; margin: 20px auto; background: #fffff9; }

    .f-l{float: left;}
    .f-r{float: right;}
    .clearfix:after{content: ""; display: block; clear: both; }
    .clearfix{zoom:1;}
    
    .w-696{width: 696px;}
    .top5{margin-top:5px;}

    .top{height: 37px; line-height: 37px; border-bottom: 1px solid #dddddd; margin-left: 23px; }
    .top dt{font-size: 18px; }
    .top dd a{font-size: 12px; color: #825d5b; }
    
    .content{width:696px; padding-left: 23px; margin-right: -36px; background: #ccc; /*???*/ }
    .content li{width: 110px; height: 254px; padding-top: 23px; float: left; margin-right: 36px;}
    .img{}
    .name{font-size: 14px; color: #825d5b; line-height: 21px; font-weight: bold;}
    .name span{font-size: 12px; color: #999999;}
    .author{font-size: 12px; line-height: 18px; color: #333333;}
    .price{font-size:12px; color: #825d5b;}
    </style>
</head>
<body>

<div class="wrap">
    <dl class="top w-696 clearfix">
        <dt class="f-l">最新上架</dt>
        <dd class="f-r"><a href="">更多新上架</a></dd>
    </dl>    

    <ul class="content w-696 clearfix">
        <li>
            <div class="img"><a href=""><img src="images/img.jpg" alt="" width="110" height="164" /></a></div>
            <p class="name top5">《人物》2013年3月10号<span>[作品]</span></p>
            <p class="author top5">东东枪 东东枪 东东枪等</p>
            <p class="price top5">8.00元</p>
        </li>
        <li>
            <div class="img"><a href=""><img src="images/img.jpg" alt="" width="110" height="164" /></a></div>
            <p class="name top5">《人物》2013年3月10号<span>[作品]</span></p>
            <p class="author top5">东东枪 东东枪 东东枪等</p>
            <p class="price top5">8.00元</p>
        </li>
        <li>
            <div class="img"><a href=""><img src="images/img.jpg" alt="" width="110" height="164" /></a></div>
            <p class="name top5">《人物》2013年3月10号<span>[作品]</span></p>
            <p class="author top5">东东枪 东东枪 东东枪等</p>
            <p class="price top5">8.00元</p>
        </li>
        <li>
            <div class="img"><a href=""><img src="images/img.jpg" alt="" width="110" height="164" /></a></div>
            <p class="name top5">《人物》2013年3月10号<span>[作品]</span></p>
            <p class="author top5">东东枪 东东枪 东东枪等</p>
            <p class="price top5">8.00元</p>
        </li>
        <li>
            <div class="img"><a href=""><img src="images/img.jpg" alt="" width="110" height="164" /></a></div>
            <p class="name top5">《人物》2013年3月10号<span>[作品]</span></p>
            <p class="author top5">东东枪 东东枪 东东枪等</p>
            <p class="price top5">8.00元</p>
        </li>
        <li>
            <div class="img"><a href=""><img src="images/img.jpg" alt="" width="110" height="164" /></a></div>
            <p class="name top5">《人物》2013年3月10号<span>[作品]</span></p>
            <p class="author top5">东东枪 东东枪 东东枪等</p>
            <p class="price top5">8.00元</p>
        </li>
        <li>
            <div class="img"><a href=""><img src="images/img.jpg" alt="" width="110" height="164" /></a></div>
            <p class="name top5">《人物》2013年3月10号<span>[作品]</span></p>
            <p class="author top5">东东枪 东东枪 东东枪等</p>
            <p class="price top5">8.00元</p>
        </li>
        <li>
            <div class="img"><a href=""><img src="images/img.jpg" alt="" width="110" height="164" /></a></div>
            <p class="name top5">《人物》2013年3月10号<span>[作品]</span></p>
            <p class="author top5">东东枪 东东枪 东东枪等</p>
            <p class="price top5">8.00元</p>
        </li>
        <li>
            <div class="img"><a href=""><img src="images/img.jpg" alt="" width="110" height="164" /></a></div>
            <p class="name top5">《人物》2013年3月10号<span>[作品]</span></p>
            <p class="author top5">东东枪 东东枪 东东枪等</p>
            <p class="price top5">8.00元</p>
        </li>
        <li>
            <div class="img"><a href=""><img src="images/img.jpg" alt="" width="110" height="164" /></a></div>
            <p class="name top5">《人物》2013年3月10号<span>[作品]</span></p>
            <p class="author top5">东东枪 东东枪 东东枪等</p>
            <p class="price top5">8.00元</p>
        </li>
    </ul>
</div>

</body>
</html>
回复
阅读 6.2k
1 个回答
✓ 已被采纳
  1. 当div设置了宽度之后,margin-right为负不会让容器扩大,如果想要容器变大,宽度需要去掉。

  2. 不知道你实现这个为什么需要使用margin-right,这个属性不到万不得已就不要使用啦,一方面可能有很多坑,另一方面浏览器支持可能不是很好。

  3. 具体margin负边距可以参考这个负边距详解

  4. 我帮你修改了一下,你看看符不符合你的要求。演示

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏