子元素 margin-right 失效

最新推荐文章于 2024-04-02 16:10:32 发布
原创 最新推荐文章于 2024-04-02 16:10:32 发布 · 328 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#css

本文揭示了在使用Flex布局实现横向滚动时，为何最后子元素的margin-right属性失效的问题。作者分享了通过为父盒子添加float:left;这一简单解决方案，以及背后的原因分析。

使用flex布局做横向滚动时，最后一个子元素 margin-right 失效

参考了 许多篇文章发现没效果
如添加父盒子 、 从flex改成float

最后 发现给父盒子加个 float: left;

就好了-
学艺不精 ，只能给出解决办法 ，至于为什么就不知道了

margin-left和right失效(斯芬克斯)之谜
01-24
一般很多人遇到的margin失效都是纵向上面的: 一种情况是元素的确不支持margin-top/bottom(参看：关于margin-top/bottom在inline元素（non-Replaced）上不起作用的解释); 另一种情况则是元素产生了margin叠加（参看：如何避开麻烦的margin叠加(margin collapsing)）。 那么margin-left/right怎么又会失效的呢？假如看过斯芬克斯之谜-IE私有属性haslayout的困扰那篇文章的童鞋，就会了解了：哦，又是haslayout啊。 我们来看看具体的失效代码：
解决微信小程序中 Flex 布局下 margin-right 不生效的问题
而世之奇伟、瑰怪，非常之观，常在于险远，而人之所罕至焉，故非有志者不能至也！
05-28 899
微信小程序开发中，flex布局下margin-right失效是常见问题。本文针对横向滚动列表边距被"吞噬"的情况，提供了完整解决方案：1)获取屏幕宽度动态设置列表宽度；2)父容器设置负左边距抵消首个元素边距；3)用inline-block+nowrap替代flex布局；4)子元素设置正常边距。同时解决了文字换行问题，实现美观的横向滚动效果。这套方案有效解决了小程序中flex布局的边距异常问题。
关于给子盒子设置marign-right 无效果（小白的一点看法）
qq_40215089的博客
04-27 338
刚才在给一个子盒子设置marign-right,居然发现啥效果都没有，又写了个demo发现设置marign-left是有效的，刚开始以为是因为子盒子右边的marign远大于设置的marign值导致没效果的，但是当把子盒子宽度设置和父盒子一样的宽度时，发现还是没效果，最后发现，原来W3C默认元素是左排列，并不是设置的marign没效果，设置float-right，脱离文档流，效果就出来了。。。 ...
斯芬克斯之谜
amorn的专栏
03-12 1190
　　古希腊有个传说,在一个王国城堡的附近有个女魔叫"斯芬克斯"。她整天守着那条过往行人必经的路,让人猜一个谜:"什么东西早上是四条腿,中午是两条腿,傍晚是三条腿"。如果行人不能答对谜底,她就会把他吃掉;如果猜出来了,她自己就会死去。很多人都猜不出谜底,于是王国中死去了许多的人,外面的人也不敢来这个地方了。这时,王国内外都充满了恐惧。终于有一天,一个叫"俄底浦斯"的年轻人来到了斯芬克斯的面前,说出了
uni-app 的 scroll-view 横向滚动右边距不生效
UserGuan的博客
03-08 1942
原因：因为 class 为 bodyBox 的子元素(view)的宽度和 scroll-view 是一致的，所以设置成 display:flex;是不管用的(即：scroll-view 并没有溢出，所以 padding 不起作用)缺点是滑动时有滚动条出现，需要手动用 css 去除滚动条。在 scroll-view 的子元素内使用。不使用 scroll-view 改为。
div class 怎么让最后一个元素margin-right：0px
07-07
在 CSS 中，如果需要将某个容器内最后一个子元素的 `margin-right` 设置为 `0px`，可以使用伪类选择器 `:last-child` 或 `:nth-last-child()` 来精确匹配最后一个子元素，并单独为其设置样式规则。 #### 示例代码：...
margin-left有效 margin-right不生效
07-03
在 Flex 容器中，子元素的 `margin-right` 可能受到对齐方式的影响。例如，若使用了 `justify-content: space-between`，则手动设置的 `margin-right` 可能被忽略。 **解决方法：** - 使用 `gap` 属性来控制子元素...
margin-right: auto不生效
04-30
在Flex容器中，当给子元素设置margin-left: auto时，它会占据左侧剩余空间，将元素推到右侧。但用户现在的问题是使用margin-right: auto无法实现同样的效果，即元素没有保持在最右侧。 可能的原因是什么？根据Flex...
以上只有margin-right 有增加水平间距的效果，但是界面放大缩小无法自适应
最新发布
11-12
另一种Flex布局方法（不设置子元素宽度）： ```css .container { display: flex; } .box1 { flex: 0 0 47.5%; /* 不放大不缩小，基础宽度47.5% */ margin-right: 5%; } .box2 { flex: 0 0 47.5%; } ```...
关于flex盒子padding-right/margin-right不生效
Kratial的博客
03-02 1256
关于flex盒子padding-right/margin-right不生效
el-table表格滚动条设置边距
qq_46005282的博客
04-02 581
在设置表格滚动条边距的时候尝试了很多方法，最后发现表格是行内元素无法设置内边距，改成块元素就可以了。
view 父子元素margin-right失效解决办法
java_csdnn的博客
03-20 573
关于margin-right失效的问题
margin-right没效果，怎么解决
hechenxi_gaoya的博客
07-21 1万+
我们在设置盒子样式或者位置的时候会遇到margin-right没有效果。要怎么解决呢？首先要观察一下设置margin-right的元素有没有设置width属性，width的属性值是什么。 当没有设置width时，width默认为auto： 这时的margin-right是正常显示的； 当width设置为固定值或者百分比时： margin-right在默认文档标准流中是无效的，要想显示出效果，必须要脱离文档标准流，可以用下面的方法恢复margin-right的效果： float：left | right；
关于margin-right失效的问题
张大晴的博客
05-16 1万+
关于margin-right失效的问题：浏览器默认从左往右渲染元素，在没有超出父容器的宽度的前提下  如果子容器的宽度能够被容纳  设置margin-right是没有用的...
CSS ( Flex布局 ) —— 关于flex布局使用滚动条时，最后一个元素margin无效的问题
Mickeymouse
08-21 7053
在开发中，很常用到flex布局，当使用flex布局，需要使用滚动条的时候，最后一个元素会出现margin无效的情况，如下： <div class="wrap"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div&
一个关于css中margin-right没有效果的问题
热门推荐
梦想还是要有的，万一实现了呢
11-05 2万+
转载自：http://www.jb51.net/css/173943.html
css布局：为什么margin-right不起效果，如何居中显示。
scarlett1017的博客
05-08 3418
css布局：为什么margin-right不起效果 ，以及如何居中显示。 不清楚这个问题其实是没有弄明白网页水平布局的一个小原理 假设这里有一个div，在这个div盒子里面有一个小的div盒子 （这里大div盒子称作父元素，小的div盒子称作子元素） 满足一个公式 子元素中的：margin-left，margin-right，padding-left，padding-right，border-left，border-right，width ，相加会等于父级元素的宽。 那么为什么设置了margin-left
html-css表单的margin-right/padding-right属性设置无效解决办法
橘子味''的博客
09-01 8429
博主原来一开始是想实现form标签中的input元素离浏览器的右边界有一定距离的效果，但是无论我在input的css中调margin-right还是在form中调padding-right都不能实现前面说的效果，后来博主改变思路用div来包裹input在调padding还是不行，我擦。于是我在改变思路用table来包裹，然后再调padding，嘿，这下可以了。 调整失败的代码 <!DOCTYPE
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值