我知道这与边距的碰撞或布局有关,但我无法完全弄清楚。我的目标是将点击的 (div) 按钮移动 5 个像素。我目前的做法是将 :active margin-top 设置为 5。
我也不知道如何让所有按钮占据整个屏幕空间。使用 100% 或 100vh 会产生太多空间。
CSS:
body{
margin: 0;
padding: 0;
font-family: Sans-Serif;
-webkit-animation: bgcolor 20s infinite;
animation: bgcolor 10s infinite;
-webkit-animation-direction: alternate;
animation-direction: alternate;
}
header{
background-color: rgba(0, 0, 0, 0.5);
color: white;
text-align: center;
font-size: 25px;
}
.container{
padding: 10px;
margin: 0 auto;
text-align: center;
}
.question{
font-size: 35px;
margin: 10px;
font-weight: bold;
color: white;
}
.buttons-container{
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-gap: 10px;
height: 100%;
}
.button{
padding: 25px;
background-color: green;
color: white;
font-size: 25px;
box-shadow: 0px 5px 0px #504f4f;
}
.button:active{
box-shadow: none;
margin-top: 5px;
}
@keyframes bgcolor {
0% {
background-color: #45a3e5
}
30% {
background-color: #66bf39
}
60% {
background-color: #eb670f
}
90% {
background-color: #f35
}
100% {
background-color: #864cbf
}
}
HTML
<?php
include 'header.php';
?>
<div class="wrapper">
<header>
Quiz
</header>
<div class="container">
<div class="question">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
<div class="buttons-container">
<div class="button">
Opt 1
</div>
<div class="button">
Opt 2
</div>
<div class="button">
Opt 3
</div>
<div class="button">
Opt 4
</div>
</div>
</div>
</div>
</body>
</html>
最佳答案
根据我的评论进一步解释:当您使用页边距时,您实际上会影响文档流,这会导致整个页面重排和重新布局。
如果你想保留文档流但要左右移动按钮,你应该考虑使用相对定位,即 position: relative;顶部:-5px;
.
ps:默认为position: static
。
关于css - "Button:active"移动所有按钮而不是只点击按钮,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59430645/