我正在尝试制作一个轮播(如下所示):
我面临的问题是,轮播的右侧都没有空白NOR填充,而仅在左侧显示。
要查看我到底在说什么,请运行下面的代码片段,一直滚动到右侧,然后与轮播一直滚动到左侧的情况进行比较(第7天应该在滚动条的中间) div末尾):
* {
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>
现在您已经看到了代码段...
2个问题:
谢谢大家!
答案 0 :(得分:1)
将此添加到您的.items类:
width:最大内容; 填充:0 100px;
删除边距和右边距!