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

I'm creating a system where users can add some products to their cart and I want them to be able to add some items with a up-arrow and a down-arrow. These arrows are to the right of some text. I've prepared a JSFiddle with the current setup:

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

FIDDLE

the html:

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

and the css:

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

Now I want the arrows to be on top of each other (with a little margin between them) but I can't seem to figure out how to do it. Could anyone help me to accomplish this?

现在我希望箭头在彼此之上(它们之间有一点距离),但我似乎无法弄清楚如何做到这一点。谁能帮我完成这个?

Thanks!

2 个解决方案

#1

Add position: absolute; to your .addbutton class. This way it stays it's place, but allows the next element to be rendered on the same position. Here's your fiddle

添加位置:绝对;到你的.addbutton类。这样它就可以保持它的位置,但允许下一个元素在同一个位置上呈现。这是你的小提琴

#2

change you .addbutton class to block instead of inline-block

将.addbutton类改为阻塞而不是内联块

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

#1