<分区>
<分区>
我正在尝试创建一个水平滚动容器。一切正常，但我似乎无法在容器的最后一个元素上产生边距，
这是笔，
https://codepen.io/mercurial_providence/pen/ZEEeGqR
<div class="container">
<div class="content full-width">
<div class="item">ITEM</div>
...
<div class="item">ITEM</div>
</div>
</div>
还有 CSS，
.container{
width:80%;
margin-left:9%;
background:blue;
height:200px;
position:absolute;
.content{
display:flex;
flex-direction:row;
overflow:auto;
}
.full-width {
left: 50%;
margin-left: -50vw;
margin-right: -50vw;
max-width: 100vw;
position: relative;
right: 50%;
width: 100vw;
> :first-child{
margin-left: 5vw;
}
> :last-child{
margin-right: 300vw;
}
}
}
.item{
min-height:92px;
min-width:92px;
background:cyan;
margin:4px;
}
最佳答案
你可以使用这个代码
body {
margin: 0px;
}
.container {
width: 80%;
margin-left: 9%;
background: blue;
height: 200px;
position: absolute;
}
.container .content {
display: flex;
flex-direction: row;
overflow: auto;
}
.container .full-width {
left: 50%;
margin-left: -50vw;
margin-right: -50vw;
max-width: 100vw;
position: relative;
right: 50%;
width: 100vw;
}
.item:first-child {
margin-left: 7vw;
}
.item:last-child {
margin-right: 300vw;
}
.item {
min-height: 92px;
min-width: 92px;
background: cyan;
margin: 4px;
padding: 5px;
}<div class="container">
<div class="content full-width">
<div class="item">ITEM</div>
<div class="item">ITEM</div>
<div class="item">ITEM</div>
<div class="item">ITEM</div>
<div class="item">ITEM</div>
<div class="item">ITEM</div>
<div class="item">ITEM</div>
<div class="item">ITEM</div>
<div class="item">ITEM</div>
<div class="item">ITEM</div>
<div class="item">ITEM</div>
<div class="item">ITEM</div>
<div class="item">ITEM</div>
<div class="item">ITEM</div>
<div class="item">ITEM</div>
<div class="item">ITEM</div>
<div class="item">ITEM</div>
<div class="item">ITEM</div>
<div class="item">ITEM</div>
<div class="item">ITEM</div>
<div class="item">ITEM</div>
<div class="item">ITEM</div>
<div class="item">ITEM</div>
<div class="item">ITEM</div>
<div class="item">ITEM</div>
<div class="item">ITEM</div>
<div class="item">ITEM</div>
</div>
</div>关于html - 向水平滚动容器的第一个和最后一个元素添加边距，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58511215/