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: inherit;属性添加到span即可。它会工作。另外，每当你在离子框架中添加一些样式时，不要忘记添加样式的!important，因为离子指令中的元素从父元素继承样式。

Answer 2

将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 3

我已更新您的代码 -

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您不需要在<br>之后添加span。

带有两个垂直跨度元素的css边距底部

3 个答案: