列表最后一项不完全显示，使用margin-bottom 无效（已解决）

最新推荐文章于 2023-12-26 19:45:12 发布
最新推荐文章于 2023-12-26 19:45:12 发布
阅读量1.5k 收藏 1
点赞数 1
分类专栏： CSS世界 文章标签： html css 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43377853/article/details/111151630
版权

最近在做项目的时候遇到一个很尴尬的问题
在这里插入图片描述
在底部菜单固定之后，列表最后一项显示不完全，通常会使用margin-bottom来让其显示出来，打但是会遇到margin-bottom无效的情况

使用

padding-bottom

可以完美解决
但是这不是从根本上解决问题的办法，如果有其他的办法，欢迎和大家讨论交流

River_Js
关注
专栏目录
CSS的学习记录
m0_60518344的博客
08-17 200
CSS分为两部分：CSS的选择器, CSS的属性。 CSS的引入方式 - 内联样式(行内样式) 缺点：样式与结构冗余 优点：优先级较高 内联样式表就是把css代码直接写在现有的HTML标签中 注意：样式的内容写在元素的开始标签里，并且css样式代码要写在style=""双引号中，多条css样式写在一起中间用分号隔开。 代码： 效果： - 内部样式表 缺点：样式的复用率较低 优点：样式与结构分离 内部样式表可以同时为多个元素设置样式 注意点: -style标签要写在head标
uView2.0 ScrollList 横向滚动列表微信小程序不滚动问题
m0_48396761的博客
08-09 3617
内部只放一个盒子,盒子内部包裹横向滚动列表项，并且盒子设置。
CSS_为什么margin-bottom经常无效，或者无法实现子div底部贴边父div？
qq_45716607的博客
04-02 1868
原文链接https://blog.csdn.net/Chill_Lyn/article/details/100903408 首先我们定义两个div，一大一小，代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"&gt
Uniapp 最后一个盒子 margin-bottom 后没有效果
最新发布
m0_48909912的博客
12-26 734
Uniapp 最后一个盒子 margin-bottom 后没有效果
CSS中的margin-bottom属性是否无效？
TdMaster的博客
10-02 989
综上所述，CSS中的margin-bottom属性是有效的，但在某些情况下可能会出现似乎无效的情况。内容溢出：如果元素的内容溢出了其容器，那么margin-bottom属性可能无效，因为溢出的内容不会影响元素的尺寸和位置。如果你在浏览器中打开HTML文件并检查元素的样式，你会发现.box元素的下边距（margin-bottom）确实被正确地应用了。相邻元素：如果两个相邻的元素之间的margin-bottom属性值重叠，那么较大的值会覆盖较小的值。解决方案是使用适当的技术（例如添加空的。
html bottom没有效果,css 设置margin-top或margin-bottom失效不取作用的解决方法
weixin_29063035的博客
06-03 6661
首先来看一个案例：.bottom-box{margin-top:30px;}我设置了margin-top属性，我的上边距应该距离父元素为30px;可是结果如何呢？结果并不是class为bottom-box的div上边距离父元素30px;而是距离body元素30px;什么原因呢？当个子元素设置margin-top属性时，如何父元素没有设置padding属性，即padding属性为0，那么会出现以上这...
css每行数量一定，但最后一行数量不定，选中最后一行添加margin-bottom
个人博客
12-26 483
为了兼容旧版本60左右的谷歌浏览器，放弃使用flex布局中gap属性还是使用margin兼容性最好，但需要清除最后一行的margin。
移动端开发底部元素margin-bottom失效解决办法
热门推荐
往后橘生
01-02 1万+
移动端开发底部元素margin-bottom失效解决办法
css margin属性深入解析
12-13
`margin`几乎可以应用于所有元素，但不包括那些显示类型为表格（如`table-caption`、`table`和`inline-table`）的元素，同时，垂直外边距对非置换内联元素（例如`<span>`或`<p>`）无效。 非置换元素是非图形化的...
美团前端一面高频面试题
beifeng11996的博客
09-13 515
美团前端一面高频面试题
Dropdown 下拉菜单中点击事件失效 el-dropdown-item 内的 @click点击无效
AmbroseLe
04-06 2061
第一种就是把@click 改为 @click.native 如果不行的话就使用指令@command 写法 <el-dropdown trigger="click" @command="handleCommand" placement="bottom-end" style="margin-left: 10px" > <spa.
微信小程序-底部元素margin-bottom失效解决办法
crabfrog的博客
09-19 6449
解决办法1 外层元素加1rpx padding .wrapper{ height: auto; padding-bottom:1rpx; } 解决办法2 用padding代替margin
[Web前端] Margin 失效问题, 设置了 Margin 却不见效果, 解决方案.
诺尔的博客
03-07 3708
首先演示下: .box1{ width: 300px; height: 300px; } .box2{ width: 200px; height: 200px; } .box3{ width: 100px; height: 100px; } .border-with{ border: solid 1px pink; } .padding-with{ padding: 1px; } .style-pink{ background-colo
listview底部显示不全问题
Caidifel的专栏
09-02 1351
我做仿淘宝结算页面的时候，加了head和foot，
uniapp margin-bottom失效（ios系统）解决方法
qq_17627195的博客
09-17 1084
uniapp margin-bottom失效（ios系统）解决方法 用了position: fixed就导致商品加载到最下面以后，会被自定义导航遮挡住。
margin塌陷问题
JunGuanDreams的博客
05-07 53
第一个字元素上margin会作用在父元素上，最后一个子元素的下margin会作用在父元素上。方案3：给父元素设置CSS样式overflow：hidden。方案2：给父元素设置宽度不为0的border。方案1：给父元素设置不为0的padding。1，什么事margin塌陷问题？
盒子模型margin边距问题
weixin_43628243的博客
08-20 463
使用 margin定义块元素的垂直外边距时，可能会出现外边距的合并。 主要有两种情况: 相邻块元素垂直外边距的合并 嵌套块元素垂直外边距的塌陷 1. 相邻块元素垂直外边距的合并 当上下相邻的两个块元素(兄弟关系)相遇时，如果上面的元素有下外边距 margin-bottom，下面的元素有 上外边距 margin-top ，则他们之间的垂直间距不是 margin-bottom 与 margin-top 之和。`取两个值中的 较大者这种现象被称为相邻块元素垂直外边距的合并 解决方案： 尽量只给一个盒子添加
css-伪类:not实现列表最后一项没有样式
Stitch_xiao的博客
08-28 1042
这个选择符，那么你将可以很好的处理类似这样的场景：假定有个列表，每个列表项都有一条底边线，但是最后一项不需要底边线。
uni-app开发微信小程序遇到的部分坑
Army-海军的博客
02-07 3232
记录一些官方文档没有的踩坑点。
el-dialog margin-bottom无效
05-27
如果您使用的是 Element UI 中的 el-dialog 组件，并且设置了 margin-bottom，但是发现无效，可能是因为 el-dialog 组件本身的样式会覆盖掉您设置的样式。为了解决这个问题，您可以使用以下两种方法之一： 1. 使用 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值