我正在尝试制作如图所示的简单演示![在此处输入图片描述][1]
我能够在 View 中显示竞争。但是我在制作此页面时遇到了一些问题
- 如何在 contend 中添加背景图片。我没有相同的背景图片，但我在此 url 中有类似的背景图片
- 如何在应用程序中使文本左对齐。单行中的结束字符。如何使所有标签左对齐。
- 如何在 GridView 中添加分隔线。实际上所有行分隔符都存在。
这是我的代码
<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>
最佳答案
在我看来，您的代码笔中的列已经左对齐，所以我假设您已经解决了。至于背景图像和分隔线，您可以使用这些 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;
}
关于javascript - 如何使文本在行内的标签中右对齐，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30535431/