如何使文本標籤右對齊內

行

我試圖讓在圖像給出簡單的演示！[在這裏輸入的形象描述] [1]如何使文本標籤右對齊內

我能夠抗衡顯示視圖中。但我面對使這個頁面

如何添加背景圖片抗衡。我沒有相同的背景圖片，但我在這個網址
如何使留在應用文本對齊有相似的背景圖像幾個問題。單行的結尾字符。如何使所有標籤左對齊。
如何在網格視圖中添加分隔線。實際上在所有行分隔符都存在。

這裏是我的代碼

<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

'類=「拉左」'應該工作（如果引導有）..否則，你需要使用'浮動：左' –

也許嘗試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

好吧，我編輯了我的答案和codepen。那對你有用嗎？ – mpallansch

是的，它的工作感謝回答..！ – Shruti

如何使文本標籤右對齊內

回答

相關問題