如何让离子项目的内容填满可用空间？

Question

我有离子条目卡一个相当简单的模板：

<ion-list> 
    <div class="card"> 

     <ion-item ng-repeat="item in items" 
        item="item" 
        ui-sref="main.tabs.create({id: item.id})"> 

      <div class="item item-avatar item-fill-space"> 
       <img data-ng-src="data:image/jpg;base64,{{ item.image[0] }}" data-err-src="../../../../../res/icons/android/icon-48-mdpi.png"> 
       <h2>{{ item.title }}</h2> 
      </div> 

      <div class="item item-body item-fill-space"> 
       {{ item.message }} 
      </div> 
     </ion-item> 
    </div> 
    <ion-infinite-scroll ng-if="!noMoreItemsAvailable" on-infinite="loadMore()" distance="10%"></ion-infinite-scroll> 
</ion-list> 

它出现这样的画面：

中间ISN水平线达不到容器的整个宽度（相对于相对侧的边缘）。我怎样才能解决这个问题？

我已经尝试添加类

.item-fill-space { 
    width: 100%; 
} 

但除非我指定的超过100％的宽度，但是这是一个有点哈克这是行不通的。

Answer 1

我有同样的问题，有一个类似的代码：

<ion-view> 
    <ion-content> 
    <ion-list> 
     <ion-item ng-repeat="aviso in avisos | filter: filter" href="#/app/avisos/{{aviso.id}}"> 
     <div class="item item-divider aviso"> 
      <strong>{{aviso.create_date | dateFormat}}</strong> 
     </div> 
     <div class="item aviso">{{aviso.formated_message}}</div> 
     </ion-item> 
    </ion-list> 
    </ion-content> 
</ion-view> 

而且，像DaveDev说，唯一的解决方法解决方案是使用的更多的则100％的宽度（在我的情况下，110％工作过为“aviso”类）。但我对此也不满意。

Answer 2

'离子含量'带有填充。

尝试看看当你在包含你的'离子列表'的外部指令中取出填充时会发生什么。