イオンアイテムの内容をどのようにスペースを埋めるようにするのですか？

Question

Iは、イオンのアイテムカードの非常に単純なテンプレートを持っている：それは、画面に次のように表示されています

<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

私は似たコードと同じ問題が、持っている：DaveDevは（私の場合には、110％が働いていた唯一の回避策ソリューションはもっとそして100％の幅を使用することで、言ったように、

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

をと「aviso」クラスの場合）。しかし、私もこれに満足していません。

Answer 2

「イオン含有量」にはパディングが付いています。

「イオンリスト」が含まれている外部ディレクティブでそのパディングを取り除くとどうなるか試してみてください。