CODEWITHSUNDEEP
htmlcsslayout
Devos50
Devos50

Reputation: 2035

two arrows on top of each other with 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:

FIDDLE

the html:

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

and the 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!

Upvotes: 1

Views: 2581

Answers (2)

core1024
core1024

Reputation: 1882

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

Upvotes: 3

Four_lo
Four_lo

Reputation: 1150

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

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

Upvotes: 2

Related Questions