在html ul列表项之间垂直对齐单元格

Question

我需要的是一个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>

我想合并一个类似表格的对齐方式。

---

更新：在li中有一个包装器div怎么样？

<ul class="table-list">
<li><div><span>xxx</span><span>yyy</span></div></li>
<li><div><span>xxxxxxx</span><span>yy</span></div></li>
<li><div><span>xxxxx</span><span>yyyyy</span></div></li>
</ul>

https://jsfiddle.net/d6zvLgfu/1/

Answer 1

使用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>

Answer 2

一种方法是使所有div位于li的内联块内，并将百分比宽度添加到.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>