Отображение содержимого влево и вправо с переменной шириной между

Question

Я ищу альтернативную мобильную презентацию данных, которая отображается в виде таблицы в виде рабочего стола. Я видел хороший пример, который выглядел так:

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

Пример, который я нашел, выглядит лучше, чем это. Но идея состоит в том, что заголовок столбца выравнивается по левому краю, а данные столбца выравниваются по правому краю, а горизонтальное правило переменной ширины объединяется. Если есть дополнительные строки данных, то одна и та же презентация будет повторяться для каждой строки, хотя в моем контексте только несколько из них будут присутствовать.

К сожалению, я наблюдал это в мобильном приложении, которое, хотя и основано на HTML, не может рассматриваться как HTML. Я не знаю, как эта презентация была выполнена, и не смогли сформулировать критерии поиска, которые привели к чему-либо применимому.

Любые идеи?

Answer 1

Здесь вы можете использовать вакансии, 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 
} 

Answer 2

гибком & список может сделать

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>