如何让我的垂直 css 选框重复

Question

我正在尝试制作一个没有任何空格/间隙的垂直选框循环，但我似乎无法让它重复。我添加了aria-hidden="true"它适用于我的水平选框，但这次似乎不是修复程序。

下面是带有选框的代码笔：https://codepen.io/theomarusman/pen/oNbBgej

这是我要删除的空白

编辑：行和列标签没用，我正在使用另一个选框的代码来制作这个，我在那里连续使用它

Answer 1

/* Please try this instead */
body {
	background-color: black;
}
.side-bar {
	top: 0;
	left: 0;
	height: 100%;
	color: white;
	writing-mode: vertical-rl;
	text-orientation: sideways-right;
}
.marquee p {
	overflow: hidden;
	white-space: nowrap;
	height: 100%;
}
.marquee span {
	animation: marquee 8s linear infinite;
	display: inline-flex;
	padding-right: 10px;
	font-size: 4rem;
}
@keyframes marquee {
	from {
		transform: translateY(-100%);
	}
	to {
		transform: translateY(0);
	}
}

<div class="position-fixed side-bar">
<div class="row marquee">
<div class="col-12 bg-white">
<p class="m-0 p-0 p-3">
<span class="m-0 p-0 pb-4" aria-hidden="true">USE CODE "MLT"</span>
<span class="m-0 p-0 pb-4" aria-hidden="true">USE CODE "MLT"</span>
<span class="m-0 p-0" aria-hidden="true">USE CODE "MLT"</span>
</p>
</div>
</div>
</div>

.marquee {
overflow: hidden;
white-space: nowrap;
}
@keyframes marquee {
from {
transform: translateY(0);
}
to {
transform: translateY(100%);
}
}

此代码更改为以下内容。

.marquee p{
overflow: hidden;
white-space: nowrap;
height:100%;
}
@keyframes marquee {
from {
transform: translateY(-100%);
}
to {
transform: translateY(0);
}
}

在代码笔中解决

https://codepen.io/Rayeesac/pen/OJMWMpm

更多的例子是

没有空格和 JS 的水平选框

没有空格和 JS 的垂直选框