Ionic Framework의 오른쪽 정렬 목록 항목 내용

Question

Ionic Framework를 사용하여 응용 프로그램을 작성하고 있습니다. AngularJS와 CSS를 사용합니다. 내 응용 프로그램에서 항목 목록을 표시해야합니다. 각 항목은 다음과 같이 표시되어야합니다.

+------------------------------------------+ 
| Item Title       123 | 
| one line of text       | 
| a seperate line of text     | 
+------------------------------------------+ 

오른쪽 정렬 된 숫자를 제외한 모든 항목이 작동합니다. 숫자는 실제로 ul입니다. 이는 의도적으로 설계된 동작입니다. 다르게 색칠 된 글꼴 아이콘이됩니다. 현재로서는, 나는 단지 일자리를 얻으려고 노력하고 있습니다. 현재 다음을 시도하고 있습니다.

<div class="list"> 
    <a class="item" style="left:0; right:0" ng-repeat="item in items"> 
    <h2>{{item.title}}</h2> 
    <p class="second-point">{{item.textA}}</p> 
    <p class="third-point">{{item.textB}}</p> 

    <ul class="row"> 
     <li class="col">1</li> 
     <li class="col">2</li> 
     <li class="col">3</li> 
    </ul> 
    </a>    
</div> 

이 항목이 렌더링되면 숫자는 처음 세 개의 텍스트 항목 아래 줄에 나타납니다. ul은 오른쪽 정렬되지 않습니다. 구성 요소를 오른쪽 정렬하려면 어떻게합니까?

감사합니다.

Answer 1

그런 다음 li에 display:inline을 적용하여 ul에 float: right와 그것을 달성 할 수있는 (또는 float : 왼쪽 또는 디스플레이 : 인라인 블록) 많은 가능성이 있지만, 인라인 상황에 나에게 easyiest 될 것 같습니다. 마지막 포인트는 부동으로 인해 ul의 위치를 ​​변경해야합니다. 먼저 부모 블록 내부에 부동 요소를 넣어야합니다.

<div class="list"> 
    <a class="item" style="left:0; right:0" ng-repeat="item in items"> 
     <ul class="row"> 
      <li class="col">1</li> 
      <li class="col">2</li> 
      <li class="col">3</li> 
     </ul> 
     <h2>{{item.title}}</h2> 
     <p class="second-point">{{item.textA}}</p> 
     <p class="third-point">{{item.textB}}</p> 
    </a>    
</div> 


    /*ul*/.row { 
     float:right; 
    } /* no need to precise your selector just a reminder */ 

    .row > li { 
     display:inline; 
    } /* selector for the "first child" li of ul, don't gonna apply on 
    li inside your li, of course your can use .col like selector */