어떻게 내 <a href="https://i.stack.imgur.com/oZGiF.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/oZGiF.png" alt="image"></a></p> <p>에서 이온 성 3

Question

보기에서 가로 스크롤을하기 전 이온 스크롤 거의 10 이름을 가지고 있지만, 단락 등의 다음 행으로오고있다.

여기 내 .html 코드입니다. 여기

<ion-scroll scrollX="true" style="width:100vw; height:50px" > 
     <ion-row class="headerChip"> 
      <div *ngFor="let tabName of product_type; let idx = index" [ngClass]="showSelectedTabArray[idx].showSelectedTab ? 'headerChipGray' : 'headerChipGreen'"> 
      <ion-chip (click)="changeData(tabName)"> 
      <ion-label >{{tabName.languagename}}</ion-label> 
      <div></div> 
      </ion-chip> 
      </div> 
     </ion-row> 
     </ion-scroll> 

내 CSS를

.headerChipGray{ 
    ion-chip.chip.chip-md{ 
     margin: 2px 2px 2px 2px; 
     border-radius: 10px; 
     border: 1px solid gray; 
     background: white; 
    } 
    ion-chip.chip.chip-ios{ 
     margin: 2px 2px 2px 2px; 
     border-radius: 10px; 
     border: 1px solid gray; 
     background: white; 
    } 
} 

.headerChipGreen{ 

    ion-chip.chip.chip-md{ 
     margin: 2px 2px 2px 2px; 
     border-radius: 10px; 
     background: white; 
     color: #A80C50; 
     border: 1px solid #A80C50; 
    } 

    ion-chip.chip.chip-ios{ 
     margin: 2px 2px 2px 2px; 
     border-radius: 10px; 
     background: white; 
     color: #A80C50; 
     border: 1px solid #A80C50; 
    } 
} 

내가는 이온에 대한 이온 문서를 놓친 거지 어떻게이 문제를 직면하고 3 이온을 업데이트 한 후 이온 2에서 작동하는 데 사용되는 코드의이 같은 작품이다 스크롤

Answer 1

스크롤 내에는 ion-row의 내용이 포장되어 있습니다.

nowrap 속성을 사용해보세요.

플렉스 랩 : nowrap을 추가합니다. 열을 단일 행에 적용합니다.

<ion-scroll scrollX="true" style="width:100vw; height:50px" > 
     <ion-row nowrap class="headerChip"> 
      <div *ngFor="let tabName of product_type; let idx = index" [ngClass]="showSelectedTabArray[idx].showSelectedTab ? 'headerChipGray' : 'headerChipGreen'"> 
      <ion-chip (click)="changeData(tabName)"> 
      <ion-label >{{tabName.languagename}}</ion-label> 
      <div></div> 
      </ion-chip> 
      </div> 
     </ion-row> 
     </ion-scroll>