如何使离子项目的内容填充可用空间？

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>

在屏幕上看起来像这样：

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

我尝试添加课程

.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”类）。但我对此也不满意。