显示与可变宽度线之间的左右对齐的内容

问题描述：

我正在寻找替代移动演示文稿的数据，以桌面形式显示为表格。我看到一个很好的例子，看起来像这样：显示与可变宽度线之间的左右对齐的内容

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

我发现的例子看起来比这更好。但想法是，列标题左对齐，并且列数据右对齐，并且可变宽度的水平规则将两者结合在一起。如果有额外的数据行，每行都会重复相同的表示，但在我的情况下，只有少数数据会出现。

不幸的是，我在一个移动应用程序中观察到了这一点，尽管它基于HTML，但不能被视为HTML。我不知道这个演示文稿是如何完成的，而且还没有能够制定出适用的搜索标准。

任何想法？

答

你可以在这里使用职位，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 
}

https://codepen.io/nexgendevs/pen/ZBawPV –

甜！这很好用！ –

Hello @KeithLosset，请正确标记此答案。我很高兴我帮助过某个人...... –

答

柔性&列表可能会做

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>

显示与可变宽度线之间的左右对齐的内容

相关推荐