Question

我正在使用字体真棒图标，我希望它们位于彼此之上。我还希望用户能够通过点击它们与他们进行交互。

问题是每个图标的元素占用的空间超出了需要并且重叠。因此，当用户认为他们点击了最上面的那个时，他们最终会激活最底层的听众。

这是html：

<div class="arrow-container">
    <i class="fa fa-sort-asc comment-vote up-vote-comment" aria-hidden="true"></i>
    <i class="fa fa-sort-desc comment-vote down-vote-comment" aria-hidden="true"></i>
</div>

和css：

.black-arrow{
    color: black;
}

.up-vote-comment{
    width: 100%;
}
.down-vote-comment{
    position: relative;
    top: -15px;
}

.comment-vote{
    font-size: 20px;
}

对我来说重要的是，两个箭头在水平方向上完全排列在同一条线上并且在垂直方向上非常接近，因为它们位于this小提琴中。

任何人都知道如何让它们在被占用的元素空间中不重叠？我尝试设置底部箭头的高度，但这只是使元素的占用空间位于箭头本身之上。

Answer 1

您可以使用以下代码：的修改

Kibana

这样您就可以使用.arrow-container类来定位箭头。

Answer 2

容器和绝对定位的组合。你甚至可以在箭头之间留出2个像素的空间。

.comment-icon-wrapper {
  height: 10px;
  width: 12px;
  overflow: hidden;
  position: relative;
  margin-bottom: 2px;
}
.comment-vote {
  position: absolute;
  display: block;
}
.comment-vote {
    font-size: 20px;
  line-height: 20px;
  display: block;
  background-color: red;
}
.comment-vote:hover {
  cursor:pointer;
}
.down-vote-comment {
    position: relative;
  top: -9px;
  background-color: blue;
}

https://jsfiddle.net/w6ybL3nb/5/（突出显示空格的背景）

Answer 3

如果你在顶部箭头和一些z索引上添加一个高度，以便顶部箭头叠加在底部箭头上，你就可以达到你想要的效果：

.black-arrow {
  color: black;
}
.up-vote-comment {
  width: 100%;
  height: 12px;
  z-index: 2;
  overflow: hidden;
}
.down-vote-comment {
  top: -13px;
  z-index: 1;
}
.comment-vote {
  font-size: 20px;
  display: inline-block;
  position: relative;
}

Updated fiddle - 我已经添加了控制台日志记录来点击箭头，这样你就可以看到哪一个被按下了

字体真棒图标元素空间有不必要的重叠

3 个答案: