帶有兩個垂直跨度元素的css邊界底部

Question

我使用離子和想要的垂直跨度元素之間有一定的距離。

這裏是一個演示：

http://play.ionic.io/app/8682286f77a8

<ion-item class="item item-avatar icon-row"> 
    <img src="img/sale_icon.jpg"> 
    <span style="color:#078d00;font-size:22px; margin-bottom: 1opx"> {{ '36,000' }}</span> 
    <br> 
    <span style="color:#4b4b4b;font-size:18px"> Sale</span> 
</ion-item> 

然而，margin-bottom是不工作的。

我可以在這些跨度之間使用另一個br，但這種方法有效，但它創造的距離比我真正想要的要大。

上面這段代碼真的看起來有什麼問題嗎？

Answer 1

將display:inline-block添加到span。這將使他們尊重margin-bottom財產。

<ion-item class="item item-avatar icon-row"> 
    <img src="img/sale_icon.jpg"> 
    <span style="color:#078d00;font-size:22px; margin-bottom: 10px;display:inline-block;"> {{ '36,000' }}</span> 
    <br> 
    <span style="color:#4b4b4b;font-size:18px;display:inline-block"> Sale</span> 
</ion-item> 

Answer 2

我已經更新了你的代碼 -

span { 
    display: list-item; 
    list-style-type: none; 
} 

現在margin-bottom效果很好！

全碼 -

<ion-item class="item item-avatar icon-row"> 
    <img src="img/sale_icon.jpg"> 
    <span style="color:#078d00;font-size:22px; margin-bottom:10px;"> {{ '36,000' }}</span> 
    <span style="color:#4b4b4b;font-size:18px;"> Sale</span> 
</ion-item> 

/* CSS */ 
span { 
    display: list-item; 
    list-style-type: none; 
} 

Working Demo，與display: list-item你不需要span後添加<br>。

Answer 3

只需添加display: inherit;屬性即可。它會工作。 另外，無論何時在離子框架中添加一些樣式，不要忘記在樣式中添加!important，因爲離子指令中的元素從父元素繼承樣式。