css - 显示左对齐和右对齐的内容，中间有可变宽度的线

Question

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

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

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

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

有什么想法吗？

Answer 1

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>