本文介绍了无法在水平滚动中滚动到左边缘的末尾-css的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我在Reaction中添加了一个水平滚动，使用的是css，我想要水平显示纸牌列表，但我无法完全滚动到左侧边缘。我在下面附上了SS，因为我已经用红色标记了问题。标记的卡片是列表中的第一张卡片，但它没有正确显示。我使用蚂蚁设计来创建卡片。
这是我的js代码和该部件的css代码。
数据-lang="js"数据-隐藏="假"数据-控制台="真"数据-巴贝尔="假"><div className={styles.subjectArea}>
<Card
hoverable
style={{ width: '219px', height: '248px', margin: 10, borderRadius: '10px', textAlign: 'center', fontWeight: 'bold' }}
cover={<img alt="example" src="https://i.pinimg.com/originals/bc/4f/e5/bc4fe5e81c387c9c1c0144caf0299ba9.jpg" style={{ objectFit: 'cover', height: '180px', borderRadius: '10px 10px 0px 0px' }} />}
>
<Meta title="Science" style={{ fontWeight: '900', margin: '-10px 0px -100px 0px' }} />
</Card>
//There are many cards, but i have removed in here for simplicity
</div>.subjectArea {
padding: 20px;
min-width: 100%;
min-height: 300px;
background: #FFFFFF;
border: 1px solid rgba(133, 77, 206, 0.25);
box-sizing: border-box;
border-radius: 8px;
display: flex;
justify-content: space-around;
align-items: center;
overflow: auto;
overflow-y: hidden;
margin-top: 20px;
}有没有合适的方法在向左滚动时完全显示第一张卡片？
推荐答案
尝试此代码，希望它能为您工作
<div class="subjectArea ">
<div class="box-contain">
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div><div class="box">
</div>
<div class="box">
</div><div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
</div>
</div>
.subjectArea {
padding: 20px;
max-width: 700px;
width : 100%;
display : flex;
min-height: 300px;
background: #FFFFFF;
border: 1px solid rgba(133, 77, 206, 0.25);
box-sizing: border-box;
border-radius: 8px;
align-items: center;
margin-top: 20px;
overflow-x : scroll;
}
.box{
width : 200px ;
height : 280px;
margin : 0px 20px;
background : #000;
}
.box-contain{
display : flex;
}
这篇关于无法在水平滚动中滚动到左边缘的末尾-css的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！
本站部分内容来源互联网,如果有图片或者内容侵犯您的权益请联系我们删除！