離子2在離子列表中有太多的空白空間

我正嘗試創建一個離線卡，其中一些文本由一行分隔，然後是一個只讀的表格數據。屏幕截圖僅顯示錶單數據部分。離子2在離子列表中有太多的空白空間

我使用的代碼像

<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

來源

2017-06-21 Vik

我不是100％肯定，你想要接近隨附的屏幕截圖的哪一部分，但由於離子只是HTML/JS/CSS，你應該能夠增加一個ID或一個類<p>的問題，並減少他們的上限。

在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 {

來源

2017-06-21 19:24:21 TheBrockEllis

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

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

來源

2017-06-21 19:30:49

我把我的離子項目包裹在一個單一的離子項目組下，但我沒有看到行距離之間的距離 – Vik

@vik所以嘗試使用CSS！ margin-bottom：-2px;例如在一個類中，並將該類放入標記中。 –

我看到的是輸入包裝類以某種方式添加了這個額外的邊距 – Vik

離子2在離子列表中有太多的空白空間

回答

相關問題