イオン3角度混乱したページのレイアウト

Question

私はイオン3の多くのページを行ったが、この特定の私の理解を超えて台無しです。 CSSは適用されません。ちょうどすべての単純なイオン成分。 それは次のようになります。

<ion-content> 
<form [formGroup]="settings" (ngSubmit)="saveSettings()"> 
    <ion-list no-lines padding> 
     <ion-item> 
     <ion-input type="text" formControlName="chatHost" placeholder="chat server url"></ion-input> 
     </ion-item> 
     <ion-item > 
      <ion-input type="text" formControlName="channelId" [disabled]="useGse == true" placeholder="channel id"></ion-input> 
     </ion-item> 

     <button ion-button type="submit" class="settings-button" [disabled]="settings.controls['chatHost'].value === ''" full>Save</button> 
    </ion-list> 
    </form> 
</ion-content> 

および外観は次のとおりです。 https://www.dropbox.com/s/wusu10ngxukt13n/Screenshot%202017-07-28%2019.47.36.png?dl=0

Answer 1

ion-listの外で繰り返さbrさんにボタンを置きます。これはおそらく影響を与えます。副注釈として、私はbrの代わりにボタンの上にスペーシングを作成するためにCSSを使用することを提案します。