두 개의 화살표가 서로 CSS 위에 있습니다.

Question

사용자가 장바구니에 제품을 추가 할 수있는 시스템을 만들고 있는데, 위쪽 화살표와 아래쪽 화살표가있는 항목을 추가 할 수있게하려고합니다. 이 화살표는 일부 텍스트의 오른쪽에 있습니다. 나는 현재 설정으로 JSFiddle을 준비했습니다 :

FIDDLE

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

의 차단 .addbutton. 이렇게하면 위치는 유지되지만 다음 요소는 동일한 위치에 렌더링 할 수 있습니다. 여기에있다 fiddle

Answer 2

변화는 수업이 .addbutton 클래스에 position: absolute;를 추가하는 대신 인라인 블록

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