リストがHTML5で正しく表示されない

Question

左にimagen、右にトグルがあるアイテムをリストしたいとします。あなたが見ることができるように

は、トグルがない下の画像のように右に左にある：

は、これが私の結果です。

しかし、その代わりに「電話アウトライン」アイコンのトグルを持つ：これは私が、私はこの結果を（馬を呼び出す）取得したい

を修正するために必要なものです。

..だからこれは私のHTMLです：

<ion-view> 
<ion-content> 
    <ion-list> 
    <div ng-repeat="cancha in vm.canchasComplejo" class="list card"> 
     <ion-item class="item-stable" 
       ng-click="vm.toggleGroup(cancha)" 
       ng-class="{active: vm.isGroupShown(cancha)}"> 
      <i class="icon" ng-class="vm.isGroupShown(cancha) ? 'ion-minus' : 'ion-plus'"></i> 
     &nbsp; 
     Group 
     </ion-item> 
     <ion-item class="item-accordion" 
       ng-repeat="opcion in cancha.opciones" 
       ng-show="vm.isGroupShown(cancha)"> 
      <div class="item item-icon-left item-icon-right" > 
       <i class="icon ion-chatbubble-working"></i> 
       Option 
       <label class="toggle toggle-assertive"> 
        <input type="checkbox"> 
         <div class="track"> 
          <div class="handle"></div> 
         </div> 
       </label> 
      </div>  
     </ion-item> 
    </div> 
    </ion-list> 
</ion-content> 
</ion-view> 

あなたはどのように私の問題を解決する方法を教えてもらえますか？ ありがとう

Answer 1

item-toggleクラスを使用します。このサンプルコードの下に

<div class="item item-toggle item-text-wrap"> 
     <i class="icon ion-chatbubble-working"></i> 
      Option 
     <label class="toggle toggle-assertive"> 
     <input type="checkbox"> 
     <div class="track"> 
      <div class="handle"></div> 
     </div> 
     </label> 
    </div>