显示左右对齐的内容,其间有可变宽度线

时间:2016-11-30 22:15:47

标签: css mobile

我正在寻找一种替代的移动数据表示形式,以桌面形式显示为表格。我看到了一个看起来像这样的好例子:

account____________________ 1234567
due date_______________ 10-NOV-2016
balance_____________________$100.00
note_____description and stuff here

我发现的例子看起来比这更好。但是我们的想法是,列标题是左对齐的,列数据是右对齐的,可变宽度的水平规则连接两者。如果有额外的数据行,则每行会重复相同的表示,但在我的上下文中,只有少数数据存在。

不幸的是,我在一个移动应用程序中观察到这一点,虽然它基于HTML,但不能被视为HTML。我不知道这个演示文稿是如何完成的,并且无法制定产生任何适用的搜索条件。

有什么想法吗?

2 个答案:

答案 0 :(得分:0)

您可以在此处使用职位see this pen获取更多信息。

ul, li {
  margin: 0;
  padding: 0;
  list-style: none;
  border-bottom: 1px solid gray;
  width: 300px;
  margin-bottom: 5px
}
li {
  position: relative;
  height: 20px;
  z-index: 9;
}
li span {
  position: absolute;
  background: white;
  bottom: -1px;
  z-index: 10;
}
li span.label {
  left: 0;
}
li span.value {
  right: 0
}

答案 1 :(得分:0)

&p> flex&列表可能会

li,
li b {
  display: flex;
}

li b,
li b:after {
  flex: 1;
}

li b:after {
  content: '';
  border-bottom: dotted;
  margin: 0.7em 0.5em auto;
}



/* demo makeup*/
ul {
  padding: 1em;
  background: gray;
  background-clip: content-box;
  box-shadow: inset 0 0 1em;
  margin: 1em;
}
li:nth-child(even){
  background:linear-gradient(rgba(0,0,0,0.2),transparent,rgba(0,0,0,0.2));
<ul>
  <li><b>Account</b> 123</li>
  <li><b>Accounts</b> 123 456</li>
  <li><b>Account Account</b> 123<br/> 456 789</li>
  <li><b>Account Act</b> 123 456 789 000</li>
  <li><b>Act</b> 123 456</li>
  <li><b>count</b> 123 456 000</li>
  </ul>