css布局时，父元素margin-right设置负值不生效是怎么回事？
给正在学前端的弟弟写个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>
展开
收起
1
条回答
写回答
写回答
-
码农|Coder| Pythonista当div设置了宽度之后，margin-right为负不会让容器扩大，如果想要容器变大，宽度需要去掉。
不知道你实现这个为什么需要使用margin-right，这个属性不到万不得已就不要使用啦，一方面可能有很多坑，另一方面浏览器支持可能不是很好。2019-07-17 19:27:51赞同 展开评论 打赏
版权声明：本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
相关问答
