イオンのアイテムの中からパディングを削除 - イオン2 AngularJS 2

Question

はここに私のscssファイルです：

page-home { 

    .scroll-content{ 
     padding: 8px; 
    } 

    ::-webkit-scrollbar, 
    *::-webkit-scrollbar { 
     display: none; 
    } 

    .item { 
     border: solid #dddddd; 
     border-radius: 2px; 
     border-width: 1.5px; 
     padding: 0 !important; 
     margin-bottom: 8px; 
    } 

    img.imgmg { 
     width: 100%; 
     height: auto; 
    } 

} 

をし、これが私のhtmlファイルです：

<ion-header> 
    <ion-navbar color="primary"> 
    <ion-title text-center> 
     App Name 
    </ion-title> 
    </ion-navbar> 
</ion-header> 

<ion-content> 
    <ion-list> 
    <ion-item *ngFor="let entry of entries" (click)="openPage(entry)" text-wrap> 
     <ion-thumbnail> 
     <img class="imgmg" src="..."> 
     </ion-thumbnail> 
     <div>...</div> 
     <h2>Text</h2> 
    </ion-item> 
    </ion-list> 
</ion-content> 

不思議なこと、パディングが0に設定！ scssファイル内の重要なは、イオンアイテムの左側でのみパッディングを削除し、パッディングを上部と右側に保ちます。

編集

scss：

{

.scroll-content{ 
     padding: 8px ; 
    } 

    .label { 
     margin: 0 0 0 0; 
    } 

    ::-webkit-scrollbar, 
    *::-webkit-scrollbar { 
     display: none; 
    } 

    h2.title { 
     font-size: 20px; 
     margin-top: -8px; 
     margin-left: 16px; 
    } 

    .item { 
     border: solid #dddddd; 
     border-radius: 2px; 
     border-width: 1.5px; 
     padding: 0 !important; 
     margin-bottom: 8px; 
    } 

    div.bar { 
     padding: 8px; 
    } 

    img.imgmg { 
     width: 100%; 
     height: auto; 
    } 

    img.ndp { 
     width: 36px; 
     height: 36px; 
    } 

    div.ndph { 
     margin-left: 8px; 
    } 

} 

htmlページ-家：

<ion-header> 
    <ion-navbar color="primary"> 
    <ion-title text-center> 
     App Name 
    </ion-title> 
    </ion-navbar> 
</ion-header> 

<ion-content> 
    <ion-refresher (ionRefresh)="doRefresh($event)"> 
    <ion-refresher-content></ion-refresher-content> 
    </ion-refresher> 
    <ion-list> 
     <ion-item *ngFor="let entry of entries" (click)="openPage(entry)" text-wrap> 
     <ion-thumbnail> 
      <img class="imgmg" src="..url image.."> 
     </ion-thumbnail> 
     <div class="bar"> 
      <div style="display:inline-block; vertical-align: middle;"> 
      <img class="ndp" src="..url image.."> 
      </div> 
      <div style="display:inline-block; vertical-align: middle;" class="ndph"> 
      <p><strong><font color="#343434">Text</font></strong></p> 
      <p>Text</p> 
      </div> 
     </div> 
     <h2 class="title">Title text</h2> 
    </ion-item> 
    </ion-list> 
</ion-content> 

Answer 1

使用このコード：

.label { 
    margin: 0; 
} 

.item-inner { 
    padding-right: 0px!important; 
}