Список, который не отображается правильно в HTML5

Question

Я хочу перечислить элементы с изображением слева и переключателем справа.

Это мой результат:

Как вы можете видеть, переключатель находится на левой стороне не по праву, как на картинке ниже. Это то, что мне нужно исправить

Я хочу, чтобы получить этот результат (Call Ma):

Но с переключателем вместо значка «телефонного контура».

Так .. Это мой 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> 

Не могли бы вы сказать мне, как исправить мою проблему? Thanks

Answer 1

Использовать пункт-toggle class. Ниже этого образца код

<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>