css - 想要消除两个标签控件之间的间隙

Question

您好，我刚刚使用半星创建了一个评级控件，问题是每个半星之间的差距。我像这样使用隐藏在星形容器上的溢出。 codepen间隙在 chrome 中可见

label:nth-child(4n+2) {
  width: 12px;
  position: relative;    
  display: block;
  margin-right: 3px;
  overflow: hidden;
}

label:nth-child(4n+4)::before {
  content: '\f006';
  display: block;
  width: 11px;    
  overflow: hidden;
} 

我怎样才能让星星更紧密地连接在一起，以至于没有缝隙

Answer 1

你可以改变类(class)的边距

.rating label:nth-child(4n+2)
{
margin-right: 0px;
}

一旦你这样做了，星星就会聚集在一起，然后你可以改变右边栏的宽度，让它变大一点(如果你愿意的话)