이온 항목 내부에서 패딩을 제거 - 이온 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; 
}