Выровнять по вертикали ячейки по элементам списка html ul - PullRequest
Новая
       4

Выровнять по вертикали ячейки по элементам списка html ul

0 голосов
/ 12 марта 2020

Мне нужен список ul, который выглядит следующим образом: 

 - xxx      yyy
 - xxxxxxx  yy
 - xxxxx    yyyyy

, а не 

 - xxx yyy
 - xxxxxxx yy
 - xxxxx yyyyy

Так что внутри 

<ul>
   <li><div class="cell1"></div><div class="cell2"></div></li>
   <li><div class="cell1"></div><div class="cell2"></div></li>
   <li><div class="cell1"></div><div class="cell2"></div></li>
</ul>

я бы нравится объединять таблицы как выравнивание 1021 *

Ответы [ 2 ]

3 голосов
/ 12 марта 2020

Используйте display: table;, и он будет вести себя как таблица: 

ul.table-list {
  display: table;
  border-collapse: collapse;
}

ul.table-list li {
  display: table-row;
  position: relative;
}

ul.table-list span {
  display: table-cell;
  padding: 0.2em 0.3em;
  border: 1px solid #14cce4; /* visualize the table */
}


/* add bullet if needed */

ul.table-list li:before {
  content: "- "
}
<ul class="table-list">
  <li><span>xxx</span><span>yyy</span></li>
  <li><span>xxxxxxx</span><span>yy</span></li>
  <li><span>xxxxx</span><span>yyyyy</span></li>
</ul>
1 голос
/ 12 марта 2020

Один из способов - сделать все DIV внутри li s встроенными блоками и добавить ширину в процентах к .cell1 и cell2: 

li>div {
  display: inline-block;
  vertical-align: top;
}

.cell1 {
  width: 20%;
}

.cell2 {
  width: 70%;
}
<ul>
  <li>
    <div class="cell1">dfg</div>
    <div class="cell2">oiu vdsklndsf oiu</div>
  </li>
  <li>
    <div class="cell1">tzuk</div>
    <div class="cell2">amn dfg sdflgj dflgmn voj seorgij ef,mgn dflj ldkfgm .,m dfg sdflgj dflgmn voj seorgij ef,mgn dflj ldkfgm moiudskjn dfsoiu sdfne roie n sdlkjh sdfkjb i iuerkjn kjh kdf</div>
  </li>
  <li>
    <div class="cell1">dsfoiu oisdfg</div>
    <div class="cell2">vxciuh dfsndf smn iuzg</div>
  </li>
</ul>
...