Antd List组件增加gutter属性后出现横向滚动,如何解决

第一次使用ant design的List列表组件,设置gutter间隔属性后,页面出现了横向滚动条,查阅文档发现是由于加间隔后导致容器宽度被撑开,ant design官方默认给外层容器加了margin-left和margin-right

 解决方法是在外层容器预留一定的padding,代码如下:

 <div className="list"><Listgrid={{gutter: 14,column: 3,}}dataSource={dataSource?.list}renderItem={(item) => (<List.Item><MoleculeCardkey={item.id}showModal={() => {}}checkedCard={this.checkedCard}checkedCardId={checkedCardId}cardDetail={item}/></List.Item>)}/></div>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/26389.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

cmake默认编译模式Debug or Release

CMAKE的编译选项 在阅读一些工程源码中&#xff0c;CMakeLists文件通常看到一下内容&#xff1a; set(CMAKE_CXX_FLAGS_DEBUG "-fPIC -O0 -g -Wall") set(CMAKE_CXX_FLAGS_RELEASE "-fPIC -O2 -g -Wall")那我们的编译时&#xff0c;用的到底是哪一个呢&a…

vue3和tauri直接下载Binary 数组的二进制文件内容到本地

通过发送url请求&#xff0c;直接获取到一个文件的Binary 数组内容&#xff0c;然后通过tauri的api&#xff1a;writeBinaryFile保存文件到本地电脑。 发送请求的时候&#xff0c;要加上响应类型&#xff1a;responseType: ResponseType.Binary 然后等返回的响应内容&#xf…

解决Spring Data JPA查询存在缓存问题及解决方案

&#x1f337;&#x1f341; 博主 libin9iOak带您 Go to New World.✨&#x1f341; &#x1f984; 个人主页——libin9iOak的博客&#x1f390; &#x1f433; 《面试题大全》 文章图文并茂&#x1f995;生动形象&#x1f996;简单易学&#xff01;欢迎大家来踩踩~&#x1f33…

【PDFBox】PDFBox操作PDF文档之添加本地图片、添加网络图片、图片宽高自适应、图片水平垂直居中对齐

这篇文章&#xff0c;主要介绍PDFBox操作PDF文档之添加本地图片、添加网络图片、图片宽高自适应、图片水平垂直居中对齐。 目录 一、PDFBox操作图片 1.1、添加本地图片 &#xff08;1&#xff09;案例代码 &#xff08;2&#xff09;运行效果 &#xff08;3&#xff09;方…

学校招生报名小程序开发笔记(一)

背景 这是一个以报名为核心的职业学校招生小程序&#xff0c;目的是方便想要系统学习技能&#xff0c;入门某项技能或者领域的初高中毕业生&#xff0c;了解该学校的基本情况及各个专业&#xff0c;并提供报名路径&#xff0c;致力于技能型人才培养 功能规划 主要功能包括专…

IntelliJ IDEA下载安装教程

目录 友情提醒第一章、IDEA软件下载1.1&#xff09;官网下载 第二章、IDEA软件安装2.1&#xff09;以"ideaIU-2018.3.3.exe"为例3.2&#xff09;启动IDEA软件 友情提醒 点击文章目录可以跳转 第一章、IDEA软件下载 IDEA 全称 IntelliJ IDEA。在智能代码助手、代码…

互联网医院牌照|互联网医院牌照办理|互联网医院申办

互联网医院牌照是一种医疗机构执业许可证&#xff0c;在行业中也称为“互联网医疗许可证”。互联网医院牌照由卫生健康委员会颁发&#xff0c;一般分为两种&#xff1a;一种是互联网医疗信息服务资质&#xff0c;另一种是互联网诊疗资质。那么如何申办互联网医院牌照呢&#xf…

面试之双亲委派原理

一面腾讯提问:如果我自定义一个 new Object 类&#xff0c;请问这个类是否会被加载&#xff1f; 回答&#xff1a;不会&#xff0c;因为双亲委派&#xff0c;向上加载。回答的过程中磨磨唧唧。当然最后一面也是没有过。 总之一句话&#xff1a;向上加载&#xff0c;向下委派. …

Morris遍历--验证二叉搜索树(java)

Morris遍历- 验证二叉搜索树题目描述Morris 遍历解题代码演示&#xff1a; morris 遍历改写后序遍历 验证二叉搜索树 来源&#xff1a;力扣&#xff08;LeetCode&#xff09; 链接&#xff1a;https://leetcode.cn/problems/validate-binary-search-tree 题目描述 给你一个二叉…

Mybatis中表关系查询结果集映射

文章目录 前言1. 实体类设计1.1 用户表1.2 地址表1.3 博客表1.4 粉丝互关表 2.插入数据3.表关联查询3.1 一对一关系3.2 一对多关系3.3 多对多关系 前言 resultMap 元素是 MyBatis 中最重要最强大的元素。它可以让你从 90% 的 JDBC ResultSets 数据提取代码中解放出来&#xff…

IMU+激光雷达实现大规模动作捕捉

VR技术的兴起&#xff0c;使得动作捕捉这门让人们可以使用肢体语言在虚拟世界中进行互动和交流的技术逐渐成为热门。随着科技的进步&#xff0c;如今的动作捕捉技术已经十分成熟&#xff0c;但在大规模场景中准确地捕捉人体运动仍然具有挑战性。它对于体育大型赛事、舞台表演、…

WPF Prims框架详解

文章目录 前言Prism基本使用Prism选择&#xff0c;DryIoc还是UnityPrism基本框架搭建Prism动态更新View和ViewModel对应关系参数动态更新函数动态绑定 prism新建项目模板region使用事例测试是否限制空间 消息订阅如何使用消息订阅使用建议 路由导航对话框/弹窗功能实现代码 前言…