離子2離子列表中的空白過多

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/Scr​​eenshot%202017-06-21%2012.40.27.png?dl=0

Answer 1

我不確定100％想要附件中屏幕截圖的哪一部分，但是由於Ionic只是HTML / JS / CSS，因此您應該可以在<p> '中添加ID或類並減少其最高利潤。

在Ionic 3中，應該有一個component.scss文件，其中包含模板.html文件和.ts文件。

您可以添加以下內容以減少最高利潤：

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

選擇器page-foo應該在.ts文件的組件聲明中建立。

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

Answer 2

嘗試在<ion-item-group></ion-item-group>使用<ion-item-group></ion-item-group> 。

如果是特殊情況，您可以使用CSS來控制同一頁面.scss中行之間的距離。