我正在尝试在表格的每一行中添加一个简单的赞成/反对票计数器。计数器基本上是一个由 css 形成的 div 容器,我将其插入到表格单元格中。然而,按原样,计票器会导致行激增。我尝试调整最顶部的 div 容器的大小,但它只调整投票元素的大小。实际计数器的大小保持不变。我是 css 新手,所以我对事物还没有很好的认识。重写我的 CSS 的最佳方法是什么,以便我可以轻松地从最顶层缩放整个投票计数器,而无需手动更改所有子元素?如果我想把这个计数器贴在我网站上的其他地方,而不是在表格单元格内,那就太好了。
这是jsfiddle。 https://jsfiddle.net/havok2063/30way48v/
非常简单的 html 描述 upvote/downvote 计数器。
<div class="vote circle">
<div class="increment up"></div>
<div class="increment down"></div>
<div class="count">8</div>
</div>
这是CSS。
.vote {
display: flex;
flex-direction: column;
position: relative;
width: 10rem;
height: 10rem;
}
.circle .up { border-radius: 10rem 10rem 0 0; }
.circle .down { border-radius: 0 0 10rem 10rem; }
.circle .count { border-radius: 50%; }
.up {
background: #4BC35F;
height: 50%;
margin-bottom: 0.25rem;
}
.down {
background: #C15044;
height: 50%;
}
.increment {
flex: 1 0 0;
text-align: center;
opacity: .5;
transition: 0.3s;
cursor: pointer;
}
.increment:hover {
opacity : 1;
}
.count {
position: absolute;
top: 0;
background: rgba(245,245,245,1.0);
border-radius: 0.1rem;
margin: 2.5rem;
width: 5rem;
font-size: 2.5rem;
font-weight: bold;
line-height: 5rem;
text-align: center;
box-shadow: 0 0 0 0.5rem rgba(245,245,245,1.0);
pointer-events: none;
}
html, body { height: 100%; }