HTML5에서 목록이 올바르게 표시되지 않습니다.

Question

왼쪽에 imagen이 있고 오른쪽에 토글이있는 항목을 나열하고 싶습니다. 당신이 볼 수 있듯이

이 토글이 아닌 아래 그림처럼 오른쪽에서 왼쪽에 있습니다 :

이 내 결과입니다. 이것은 내가 (엄마를 호출)이 결과를 얻으려면

수정해야 할 것입니다 :

하지만 그 대신 "전화 - 개요"아이콘의 전환과

.

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

이 어떻게 내 문제를 해결하는 방법을 가르쳐 수 :

그래서 ..이 내 HTML입니까? 감사합니다.

Answer 1

항목 토글 클래스를 사용하십시오. 이 샘플 코드 아래

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