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

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

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

  • как добавить фоновое изображение в спор. У меня нет такого же фонового изображения, но у меня есть похожее фоновое изображение в этом URL-адресе
  • как сделать так, чтобы текст выровнялся по левому краю в приложении. Конечный символ в одной строке. как сделать, чтобы все метки были выровнены по левому краю.
  • как добавить разделительную линию в виде сетки. На самом деле во всех разделителях строк присутствуют.

вот мой код

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

ionic-framework javascript css angularjs ionic
person Shruti    schedule 29.05.2015    source источник
comment
class="pull-left" должно работать (если есть бутстрап). В противном случае вам нужно использовать float: left   -  person Pankaj Parkar    schedule 29.05.2015
comment
Возможно, попробуйте свойство css text-align для родительского элемента контейнера метки.   -  person Allen Tellez    schedule 29.05.2015

Ответы (1)


arrow_upward
2
arrow_downward

Столбцы в вашей кодовой ручке уже выглядят выровненными по левому краю для меня, поэтому я предполагаю, что вы с этим справились. Что касается фонового изображения и линий-разделителей, вы можете использовать следующие правила 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;
}
person mpallansch    schedule 29.05.2015
comment
извините, мне нужно правильно выровнять .. пожалуйста, проверьте изображение ниже .. Номер счета, имя счета, номер счета выровнен по правому краю - person Shruti; 29.05.2015
comment
хорошо, я отредактировал свой ответ и codepen. Это работает для вас? - person mpallansch; 29.05.2015