子元素 margin-right 失效

最新推荐文章于 2025-05-28 22:27:58 发布
最新推荐文章于 2025-05-28 22:27:58 发布
阅读量315 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： 笔记 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/zbz_index/article/details/117292786
本文揭示了在使用Flex布局实现横向滚动时，为何最后子元素的margin-right属性失效的问题。作者分享了通过为父盒子添加float:left;这一简单解决方案，以及背后的原因分析。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

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

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

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

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

都1902年了,还不知道用margin:auto给flex容器内元素分组?
十八酱君
12-01 323
​最近看到几篇博文讲解margin:auto在flex容器中的使用,可惜的是大多讲解都浮于页面表现,没深究其中的作用机理,本文在此浅薄对其表现机理做简单探讨. 引子 日常业务迭代过程中,flex已经是前端工程师解决常见布局的神兵利器.但是随着使用的深入,偶然会发觉flex对于简单的布局足够直接迅速,但是对于稍稍复杂一些的布局,就需要层层的包裹分组来解决.举个栗子,下图是我们常见的布局图: ...
【CSS疑难点汇总】1.bor-box失效情况总结以及高宽设置为auto的情况
kakaai77的博客
04-09 846
box-sizing是改变盒子宽高的计算方式，一般使用bor-box，消除padding和border对整个盒子的影响，但在没有明确给出宽高的情况下，box-sizing是没有效果的。如上图，我们并没有给box设置box-sizing：border-box，但box的高度被撑开了，宽度依旧和父元素相同，并没有被撑开，因为box继承了父亲的宽度，wdith为auto。现在明白宽度的继承和设置100%的区别了吧，设置了100%相当于明确给了子元素的宽度的数值。如上图，很明显，当box的宽度和高度为auto时。
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啊。 我们来看看具体的失效代码：
关于给子盒子设置marign-right 无效果（小白的一点看法）
qq_40215089的博客
04-27 326
刚才在给一个子盒子设置marign-right,居然发现啥效果都没有，又写了个demo发现设置marign-left是有效的，刚开始以为是因为子盒子右边的marign远大于设置的marign值导致没效果的，但是当把子盒子宽度设置和父盒子一样的宽度时，发现还是没效果，最后发现，原来W3C默认元素是左排列，并不是设置的marign没效果，设置float-right，脱离文档流，效果就出来了。。。 ...
解决微信小程序中 Flex 布局下 margin-right 不生效的问题
最新发布
而世之奇伟、瑰怪，非常之观，常在于险远，而人之所罕至焉，故非有志者不能至也！
05-28 767
微信小程序开发中，flex布局下margin-right失效是常见问题。本文针对横向滚动列表边距被"吞噬"的情况，提供了完整解决方案：1)获取屏幕宽度动态设置列表宽度；2)父容器设置负左边距抵消首个元素边距；3)用inline-block+nowrap替代flex布局；4)子元素设置正常边距。同时解决了文字换行问题，实现美观的横向滚动效果。这套方案有效解决了小程序中flex布局的边距异常问题。
斯芬克斯之谜
amorn的专栏
03-12 1158
　　古希腊有个传说,在一个王国城堡的附近有个女魔叫"斯芬克斯"。她整天守着那条过往行人必经的路,让人猜一个谜:"什么东西早上是四条腿,中午是两条腿,傍晚是三条腿"。如果行人不能答对谜底,她就会把他吃掉;如果猜出来了,她自己就会死去。很多人都猜不出谜底,于是王国中死去了许多的人,外面的人也不敢来这个地方了。这时,王国内外都充满了恐惧。终于有一天,一个叫"俄底浦斯"的年轻人来到了斯芬克斯的面前,说出了
uni-app 的 scroll-view 横向滚动右边距不生效
UserGuan的博客
03-08 1693
原因：因为 class 为 bodyBox 的子元素(view)的宽度和 scroll-view 是一致的，所以设置成 display:flex;是不管用的(即：scroll-view 并没有溢出，所以 padding 不起作用)缺点是滑动时有滚动条出现，需要手动用 css 去除滚动条。在 scroll-view 的子元素内使用。不使用 scroll-view 改为。
关于flex盒子padding-right/margin-right不生效
Kratial的博客
03-02 1215
关于flex盒子padding-right/margin-right不生效
我想调整display: flex;元素的位置怎么弄，margin-left: 20px不好使
03-20
其次，Flex子元素之间的间距可能被`gap`属性影响，或者子元素本身有flex-grow属性导致占据剩余空间，使得margin无效。另外，Flex容器的排列方向是否为默认的行方向也可能影响。 接下来，我需要提供解决方案。替代...
``` <!-- 预估费用 --> <view v-if="currentTab === 3" class="list"> <!-- 查询条件容器 --> <view class="query-condition"> <!-- 标题 --> <text class="section-title" style="margin-left: 20rpx;">查询条件</text> <!-- 条件输入行 --> <view class="input-row"> <!-- 商家名称部分 --> <view class="input-group"> <text class="label">商家名称</text> <input class="input" type="text" placeholder="请输入" style="margin-left: 20rpx; width: 200rpx;" /> </view> <!-- 计费日期部分 --> <view class="date-group" style="margin-left: 40rpx;"> <text class="label">计费日期</text> <input class="date-input" type="month" style="margin-left: 20rpx; width: 200rpx;" /> <text style="margin: 0 10rpx;">至</text> <input class="date-input" type="month" style="width: 200rpx;" /> </view> <!-- 操作按钮 --> <view class="action-buttons" style="margin-left: auto;"> <button class="btn reset-btn" @click="handleReset" style="margin-right: 30rpx;" >重置</button> <button class="btn query-btn" @click="handleQuery" >查询</button> </view> </view> </view> </view>```写完之后页面什么东西都没有
04-02
5. 检查CSS样式，特别是父容器的布局，是否使用了flex或grid，导致子元素排列异常。 6. 确保所有类名对应的样式正确定义，没有拼写错误或遗漏。 可能需要用户提供更多信息，比如currentTab的初始化及更新逻辑，样式...
el-table表格滚动条设置边距
qq_46005282的博客
04-02 525
在设置表格滚动条边距的时候尝试了很多方法，最后发现表格是行内元素无法设置内边距，改成块元素就可以了。
margin-right没效果，怎么解决
hechenxi_gaoya的博客
07-21 9950
我们在设置盒子样式或者位置的时候会遇到margin-right没有效果。要怎么解决呢？首先要观察一下设置margin-right的元素有没有设置width属性，width的属性值是什么。 当没有设置width时，width默认为auto： 这时的margin-right是正常显示的； 当width设置为固定值或者百分比时： margin-right在默认文档标准流中是无效的，要想显示出效果，必须要脱离文档标准流，可以用下面的方法恢复margin-right的效果： float：left | right；
margin-right无效问题简析
money_monkey的博客
07-18 5132
margin-right无效问题简析
关于margin-right失效的问题
热门推荐
张大晴的博客
05-16 1万+
关于margin-right失效的问题：浏览器默认从左往右渲染元素，在没有超出父容器的宽度的前提下  如果子容器的宽度能够被容纳  设置margin-right是没有用的...
CSS ( Flex布局 ) —— 关于flex布局使用滚动条时，最后一个元素margin无效的问题
Mickeymouse
08-21 6942
在开发中，很常用到flex布局，当使用flex布局，需要使用滚动条的时候，最后一个元素会出现margin无效的情况，如下： <div class="wrap"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div&
html-css表单的margin-right/padding-right属性设置无效解决办法
橘子味''的博客
09-01 8385
博主原来一开始是想实现form标签中的input元素离浏览器的右边界有一定距离的效果，但是无论我在input的css中调margin-right还是在form中调padding-right都不能实现前面说的效果，后来博主改变思路用div来包裹input在调padding还是不行，我擦。于是我在改变思路用table来包裹，然后再调padding，嘿，这下可以了。 调整失败的代码 <!DOCTYPE
css 使每行最后一个margin-right无效
z467469274的博客
10-18 6955
&lt;div class="showGenres"&gt; &lt;div class="ginner"&gt; &lt;span class="genreTab"&gt;流派1&lt;/span&gt; &lt;span class="genreTab"&gt;流派1&lt;/span&
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值