html - 始终定位下一个和上一个顶部
问题描述
Stackoverflow 我试图将“下一个”和“上一个”箭头始终定位在侧边栏(侧边栏标题)的顶部,但是无法弄清楚如何在桌面和移动设备上获得相同的位置?
现有代码:
.prev,
.next {
cursor: pointer;
position: absolute;
padding: 16px;
}
.next {
position: absolute;
right: 0;
border-radius: 3px 0 0 3px;
}
.prev:hover,
.next:hover {
background-color: rgba(0, 0, 0, 0.8);
color: white;
}
.sidebar {
display: inherit;
grid-gap: inherit;
}
@media (min-width: 67.5em) and (max-width: 40em) {
.sidebar {
grid-template-columns: 1fr 1fr;
0
}
}
@media all and (min-width: 1353px) {
.Gridcontainer {
grid-template-columns: 2fr 1fr;
}
}
@media all and (min-width: 1352px) {
.sidebar {
grid-auto-rows: 100%;
grid-row: span 1;
}
}
<div class="Gridcontainer">
<div class="Intro">
<video autoplay="" class="Videohack" loop="">
<source src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4">
</video>
</div>
<div class="sidebar">
<a class="prev" onclick="plusSlides(-1)">❮</a> <a class="next" onclick="plusSlides(1)">❯</a>
解决方案
您必须top
为这两个按钮定义,例如50%
:
.prev,
.next {
cursor: pointer;
position: absolute;
top: 50%; /* this makes the difference */
...
工作示例:(我为按钮添加了另一种颜色以进行演示)
.prev,
.next {
cursor: pointer;
position: absolute;
top: 50%; /* this makes the difference */
padding: 16px;
color: gray; /* just for demonstration */
}
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
.prev:hover,
.next:hover {
background-color: rgba(0, 0, 0, 0.8);
color: white;
}
.sidebar {
display: inherit;
grid-gap: inherit;
}
@media (min-width: 67.5em) and (max-width: 40em) {
.sidebar {
grid-template-columns: 1fr 1fr;
0
}
}
@media all and (min-width: 1353px) {
.Gridcontainer {
grid-template-columns: 2fr 1fr;
}
}
@media all and (min-width: 1352px) {
.sidebar {
grid-auto-rows: 100%;
grid-row: span 1;
}
}
<div class="Gridcontainer">
<div class="Intro">
<video autoplay="" class="Videohack" loop="">
<source src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4">
</video>
</div>
<div class="sidebar">
<a class="prev" onclick="plusSlides(-1)">❮</a> <a class="next" onclick="plusSlides(1)">❯</a>
</div>
</div>
推荐阅读
- javascript - 不断提示用户正确输入 Javascript
- wildfly - 如何在 Wildfly 10/JB EAP 7 中动态修改经过身份验证的用户的安全角色后身份验证?
- facebook-login - 从网页登录和应用登录获取的用户ID是一样的吗?
- c# - 具有多个客户端连接的 signalR
- python - 来自串口的数据采用垂直格式
- php - Laravel Nova 仪表板未加载
- rabbitmq - 在 Spring Boot 中使用路由密钥和交换使用 DirectExchange 消息
- php - 你如何忽略php搜索栏中的破折号和逗号
- javascript - 如何使用 javascript 验证输入
- python - 如何在包含一些整数和一些字符串的字符串列表中浮动元素?