第一次使用ant design的List列表组件，设置gutter间隔属性后，页面出现了横向滚动条，查阅文档发现是由于加间隔后导致容器宽度被撑开，ant design官方默认给外层容器加了margin-left和margin-right
解决方法是在外层容器预留一定的padding，代码如下：文章来源：https://www.toymoban.com/news/detail-567537.html
.list {
width: 100%;
height: 100%;
padding: 0 7px;
} <div className="list">
<List
grid={{
gutter: 14,
column: 3,
}}
dataSource={dataSource?.list}
renderItem={(item) => (
<List.Item>
<MoleculeCard
key={item.id}
showModal={() => {}}
checkedCard={this.checkedCard}
checkedCardId={checkedCardId}
cardDetail={item}
/>
</List.Item>
)}
/>
</div>到此，完美解决～文章来源地址https://www.toymoban.com/news/detail-567537.html
到了这里，关于Antd List组件增加gutter属性后出现横向滚动，如何解决的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
