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课程。这样它就可以保持它的位置，但允许下一个元素在同一个位置上呈现。这是你的fiddle

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;
   }

两个箭头在彼此的顶部与CSS

2 个答案: