ion 2 ion-list中的空格太多

Question

我正在尝试创建一个离子卡，用线分隔一些文本，然后在它下面创建一个只读表单数据。该屏幕截图仅显示表单数据部分。

我使用的代码如下

<ion-list>
    <ion-item>
        <ion-label><p>Close Date</p></ion-label>
        <ion-label><p>In 22 Days</p></ion-label>
    </ion-item>
    <ion-item>
        <ion-label><p>Last Activity</p></ion-label>
        <ion-label><p>In 22 Days</p></ion-label>
    </ion-item>
</ion-list>

但是这会在两行之间留下太多的空格。

​

这就是我们想要的。该页面看起来像https://www.dropbox.com/s/ihxh3bckziyfcdp/Screenshot%202017-06-21%2012.40.27.png?dl=0

Answer 1

我不能100%确定你想要接近所附截图的哪一部分，但由于离子是超文本标记语言/JS/CSS，你应该能够添加一个ID或一个类到有问题的<p>，并减少它们的上边距。

在IONIC3中，应该有一个包含模板.html文件和.ts文件的component.scss文件。

您可以添加类似以下内容来减少顶部边距：

page-foo {
  .tight-paragraph {
    margin-top: 2px;
  }
}

应该在.ts文件的组件声明中建立选择器page-foo。

@Component({
  selector: 'page-foo',
  templateUrl: 'foo.html' 
})
export class FooPage {

Answer 2

尝试在ion-item之外使用<ion-item-group></ion-item-group>。

如果是特定情况，您可以使用CSS来控制同一页面的.scss中的行之间的距离。