兩個箭頭之間用css

我正在創建一個系統，用戶可以添加一些產品到他們的購物車，我希望他們能夠添加一些向上箭頭和向下箭頭的項目。這些箭頭位於某些文本的右側。我已經準備了的jsfiddle當前設置：兩個箭頭之間用css

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

現在我想的箭頭是彼此之間（他們之間有一點空白），但我似乎無法弄清楚如何去做。任何人都可以幫我完成這個任務嗎？

謝謝！

來源

2013-07-26 Devos50

添加position: absolute;您.addbutton類。這樣它保持它的位置，但允許下一個元素被渲染在相同的位置。這裏是你的fiddle

來源

2013-07-26 14:36:36 core1024

它的工作原理，謝謝！但是有什麼方法可以改變兩個箭頭之間的邊距嗎？ – Devos50

嘗試設置下邊箭頭的上邊距和下邊距邊緣的「margin-top」，使它們在中間對齊。就像這樣http://jsfiddle.net/xTQ6h/26/ – core1024

改變你.addbutton類阻止，而不是inline-block的

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

來源

2013-07-26 14:34:26

或者只是完全刪除'display'聲明... divs默認是塊元素。 – robooneus

嘿，謝謝你，但我希望箭頭是在文本的右側，而不是當我chanse添加按鈕的顯示屏蔽:( – Devos50

@ Devos50浮動像這樣的箭頭是一種比較普遍的首選方法使用'position：absolute;'而不需要，你只需要將兩個按鈕都包裝在一些東西中，然後把它放在文本的旁邊[見這個小提琴]（http://jsfiddle.net/xTQ6h/29/） – robooneus

兩個箭頭之間用css

回答

相關問題