我正在尝试制作一个旋转木马（运行片段如下）:
我面临的问题是，边距和填充都不能在旋转木马的右侧工作，只能在左侧显示。
要了解我所说的内容，请运行下面的代码片段，向右滚动，并与旋转木马向左滚动时的情况进行比较（第7天应该位于div的中间）:
null
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
body {
font-family: Arial, Helvetica, sans-serif;
}
h1 {
text-align: center;
margin-top: 10px;
margin-bottom: 20px;
}
nav {
display: flex;
align-items: center;
justify-content: center;
}
.carousel-wrapper {
position: relative;
}
/* Arrows (ignore them, they don't work yet) */
.carousel-wrapper::before,
.carousel-wrapper::after {
content: "";
border-top: 2px solid black;
border-right: 2px solid black;
position: absolute;
height: 10px;
width: 10px;
top: calc(50% - 5px);
cursor: pointer;
}
.carousel-wrapper::before {
transform: rotate(-135deg);
left: -20px;
}
.carousel-wrapper::after {
transform: rotate(45deg);
right: -20px;
}
/* Where overflow hidden and overflow-x: scroll is */
.carousel {
border: 1px solid black;
background-color: #21abde;
overflow: hidden;
overflow-x: scroll;
width: 300px;
}
/* PROBLEM AREA (where the margin and padding should be but isn't working */
.links {
display: flex;
transform: skew(-15deg);
flex-shrink: 0;
margin: 0 100px;
margin-right: 100px;
}
/* Anchors */
a {
display: flex;
justify-content: center;
align-items: center;
color: white;
background-color: #21abde;
width: 100px;
height: 50px;
flex-shrink: 0;
text-decoration: none;
}
a span {
transform: skew(15deg);
}
a:hover {
background-color: #044c66;
}<body>
<h1>Dates</h1>
<nav class="dates">
<div class="carousel-wrapper">
<div class="carousel">
<div class="links">
<a href=""><span>Day 1</span></a>
<a href=""><span>Day 2</span></a>
<a href=""><span>Day 3</span></a>
<a href=""><span>Day 4</span></a>
<a href=""><span>Day 5</span></a>
<a href=""><span>Day 6</span></a>
<a href=""><span>Day 7</span></a>
</div><!-- Padding / margin should be showing up here -->
</div>
</div>
</nav>
<script src="app.js"></script>
</body>null
既然您已经看到了代码片段。。。
2个问题:
谢谢伙计们！
将此添加到您的。Items类:
宽度:最大-内容； 填充物:0 100 px；
删除边距和边距-右！
