gpt4 book ai didi

html - 水平滚动不显示右边距

转载 作者:行者123 更新时间:2023-11-28 00:48:34 26 4
gpt4 key购买 nike

在我的移动 View 中,我有一个包含三个 div(如卡片)的水平滚动条。水平滚动效果很好,但是,最后一个 div 的右边距没有显示。它应该显示 6px。所有三个 div 都有 margin-left: 6pxmargin-right: 6px;

这是正确显示的左边距:

enter image description here

这里根本没有显示右边距:

enter image description here

@media only screen and (max-width: 480px) {
/* Html */
html {
overflow: scroll;
overflow-x: hidden;
}
/* Cards */
.mobile-card-container>.row {
overflow-x: auto;
}
.mobile-card-container {
display: block;
}

.card-background {
height: 100px;
background-color: #ffffff;
border-radius: 6px;
margin-top: 16px;
-webkit-box-shadow: 0px 2px 4px 1px rgba(0, 51, 102, 0.1);
-moz-box-shadow: 0px 2px 4px 1px rgba(0, 51, 102, 0.1);
box-shadow: 0px 2px 4px 1px rgba(0, 51, 102, 0.1);
margin-left: 6px !important;
margin-right: 6px !important;
}
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<html>

<body>


<!-- Simulaciones Default -->
<div class="row">
<!-- Mobile Card Container -->
<div class="col-12 mobile-card-container container-fluid" style="border: 1px solid;">
<div class="row flex-nowrap flex-sm-wrap" style="border: 1px solid red;">
<!-- Card 1 -->
<div class="col-10 card-background simulacion mx-auto">
Card 1
</div>

<!-- Card 2 -->
<div class="col-10 card-background simulacion mx-auto">
Card 2
</div>

<!-- Card 3 -->
<div class="col-10 card-background simulacion mx-auto">
Card 3
</div>

</div>

</div>
<!-- /Mobile Card Container -->



</body>

</html>

最佳答案

这篇文章解决了我的问题。我基本上是在我的最后一个 div 中添加了一个 content

Last margin / padding collapsing in flexbox / grid layout

关于html - 水平滚动不显示右边距,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53394739/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com