как сделать текст по правому краю в метках внутри строки

Я пытаюсь сделать простой демо, как указано в изображении! [Введите описание изображения здесь] [1]как сделать текст по правому краю в метках внутри строки

Я способен отображать соперничают в виде .Но я облицовочный несколько вопрос в создании этой страницы

как добавить фоновое изображение в соперничают .Я не имеют же фоновое изображение, но у меня есть подобный фон в этом URL
как сделать выравнивание текста слева в приложении. Конечный символ в строке sigle. Как сделать все метки слева выравниванием.
как добавить разделительную линию в виде сетки. Фактически во всех разделителя строк присутствует.

вот мой код

<html ng-app="ionicApp"> 

<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> 

    <title>Tabs Example</title> 

    <link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet"> 
    <script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script> 
</head> 

<body> 

</body> 

    <ion-view> 
     <ion-header-bar align-title="center" class="bar-balanced"> 
      <div class="buttons" style="font-size:20px ;padding:3px"> 
       <i style="font-size:30px;" class='icon ion-chevron-left'></i> 
      </div> 
      <h1 class="title">Account</h1> 
     </ion-header-bar> 
     <ion-content> 
      <div class="button-bar"> 
       <a class="button button-small" ui-sref="a" ui-sref-active="button-balanced">Account Details</a> 
       <a class="button button-small" ui-sref="l" ui-sref-active="button-balanced">Related</a> 
       <a class="button button-small" ui-sref="dinner" ui-sref-active="button-balanced">d</a> 
       <a class="button button-small" ui-sref="dinner" ui-sref-active="button-balanced">Notes</a> 
      </div> 
       <div> 
       <h4 class="headerTitle">Account Information</h4> 
       <div class="row rowoffset"> 
        <div class="col gey_label_font">Number:</div> 
        <div class="col">0981234165</div> 
        <div class="col"></div> 
        <div class="col gey_label_font">Name:</div> 
        <div class="col">Girish Padhve</div> 
       </div> 

       <div class="row rowoffset"> 
        <div class="col gey_label_font">Owner:</div> 
        <div class="col">Girish</div> 
        <div class="col"></div> 
        <div class="col gey_label_font">Total AR:</div> 
        <div class="col">345</div> 
       </div> 

       <div class="row rowoffset"> 
        <div class="col gey_label_font">Last:</div> 
        <div class="col">123</div> 
        <div class="col"></div> 
        <div class="col gey_label_font">Last ] Amount:</div> 
        <div class="col">9891234165</div> 
       </div> 

       <div class="row rowoffset"> 
        <div class="col gey_label_font"> Net Collectible:</div> 
        <div class="col">123</div> 
        <div class="col"></div> 
        <div class="col gey_label_font">Past Due:</div> 
        <div class="col">9891234165</div> 
       </div> 

       <div class="row rowoffset"> 
        <div class="col gey_label_font"> Total Past Due:</div> 
        <div class="col">123</div> 
        <div class="col"></div> 
        <div class="col gey_label_font">Total Promised:</div> 
        <div class="col">9891234165</div> 
       </div> 

       <div class="row rowoffset"> 
        <div class="col gey_label_font">Total Disputed:</div> 
        <div class="col">123</div> 
        <div class="col"></div> 
        <div class="col gey_label_font">Limit:</div> 
        <div class="col">9891234165</div> 
       </div> 
       <div class="row rowoffset"> 
        <div class="col gey_label_font">Remaining:</div> 
        <div class="col">123</div> 
        <div class="col gey_label_font"></div> 
        <div class="col">Credit Score:</div> 
        <div class="col">9891234165</div> 
       </div> 


      </div> 

     </ion-content> 
    </ion-view> 
    </html>

источник

2015-05-29 Shruti

'класс =«тянуть налево»' должна работать (если самозагрузки есть) .. в противном случае вам нужно использовать 'поплавок: left' –

Возможно, попробуйте css-свойство text-align на родительском элементе контейнера метки. –

Столбцы в вашем codepen уже выглядят выровнены влево для меня, поэтому я предполагаю, что вы работали на это. Что касается фонового изображения и разделительных линий, вы можете использовать эти правила CSS: http://codepen.io/anon/pen/YXNVvv

#wrapper { 
    background-image: url(https://dl.dropboxusercontent.com/s/nz1fzunlqzzz7uo/login_bg.png?dl=0); 
} 

.rowoffset{ 
    border-top: 1px solid gray; 
} 

.gey_label_font{ 
    text-align: right; 
}

источник

2015-05-29 17:33:38 mpallansch

извините, мне нужно выровнять по правому краю .. проверьте ниже изображение .. Номер счета, имя учетной записи, номер счета правильно выравнивается – Shruti

хорошо, я отредактировал свой ответ и код. Это работает для вас? – mpallansch

да это работа спасибо для ответа .. !! – Shruti

как сделать текст по правому краю в метках внутри строки

ответ

Смежные вопросы