css布局时,父元素margin-right设置负值不生效是怎么回事? -问答-阿里云开发者社区-阿里云

开发者社区> 问答> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

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

2016-06-06 10:41:31 2939 1

给正在学前端的弟弟写个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)
  • 西秦说云
    2019-07-17 19:27:51

    当div设置了宽度之后,margin-right为负不会让容器扩大,如果想要容器变大,宽度需要去掉。
    不知道你实现这个为什么需要使用margin-right,这个属性不到万不得已就不要使用啦,一方面可能有很多坑,另一方面浏览器支持可能不是很好。

    0 0
相关问答

1

回答

一个关于 css布局的问题?

2016-06-08 14:28:00 1716浏览量 回答数 1

2

回答

关于css布局问题

2016-06-06 17:25:32 1807浏览量 回答数 2

1

回答

css布局出现的问题

2016-06-02 13:40:14 1656浏览量 回答数 1

1

回答

关于css布局的一个小问题

2016-03-25 15:08:11 1485浏览量 回答数 1

2

回答

JS/CSS 选项卡

2020-02-13 19:32:18 795浏览量 回答数 2

1

回答

业界常用的优化 WEB 页面加载速度的方法(可以分别从页面元素展现,请求连接,css,js,服务器等

2019-12-16 21:33:06 1409浏览量 回答数 1

1

回答

前端面试经典题目合集-哪些地方会出现css阻塞,哪些地方会出现js阻塞?

2019-11-28 16:17:54 495浏览量 回答数 1

1

回答

css 动画和 js 动画的差异

2019-11-21 18:30:06 774浏览量 回答数 1

1

回答

在 css/js 代码上线之后开发人员经常会优化性能,从用户刷新网页开始,一次 js 请求一般情况下

2019-11-19 18:10:28 1112浏览量 回答数 1

1

回答

为什么最好把CSS的<link>标签放在<head></head>之间?为什么最好把JS的<scri

2019-11-18 13:28:31 2461浏览量 回答数 1
+关注
杨冬芳
IT从业
文章
问答
问答排行榜
最热
最新
相关电子书
更多
零基础CSS入门教程
立即下载
Java开发手册-孤尽秘传版
立即下载
低代码开发师(初级)实战教程
立即下载