离子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在离子列表中有太多的空白空间

回答

相关问题