如何使离子项的内容填满空间？

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％用于＆＃34; aviso＆＃34;类）。但我对此也不满意。

Answer 2

'ion-content'带有填充物。

尝试查看在包含“ion-list”的外部指令中取出填充时会发生什么。