html - 用css相互重叠的两个箭头

Question

我正在创建一个系统，用户可以在其中将一些产品添加到他们的购物车中，并且我希望他们能够添加一些带有向上箭头和向下箭头的项目。这些箭头位于某些文本的右侧。我用当前设置准备了一个 JSFiddle：

小提琴

的HTML：

<p>1</p>
<div class="addbutton"></div>
<div class="minbutton"></div>

和CSS：

p {
    display: inline-block;
    margin: 0;
}

.addbutton {
    width: 0; 
    height: 0; 
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 5px solid black;
    display: inline-block;
}

.minbutton {
    width: 0; 
    height: 0; 
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid black;
    display: inline-block;
}

现在我希望箭头彼此重叠（它们之间有一点边距），但我似乎不知道该怎么做。谁能帮我完成这个？

谢谢！

Answer 1

添加position: absolute;到您的.addbutton班级。这样它就保持原位，但允许下一个元素呈现在同一位置。这是你的小提琴

Answer 2

将 .addbutton 类更改为 block 而不是 inline-block

   .addbutton {
  width: 0; 
  height: 0; 
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 5px solid black;
  display: block;
   }