跨html ul列表项垂直对齐单元格答案

【问题标题】：Vertically align cells across html ul list items跨html ul列表项垂直对齐单元格
【发布时间】：2020-06-24 14:40:20
【问题描述】：

我需要的是一个如下所示的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/

【问题讨论】：

你有 display:table （例如：stackoverflow.com/a/58866150/8620333（检查第二个 sn-p）

标签： html css list html-table

【解决方案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>

【讨论】：

您可以使用div，但span 在内联上下文中更有意义。
但它仍然应该看起来像一个列表，不是吗？
@Johannes 请询问 OP。不知道要求。再看看这个问题，你可能是对的。但这只是附加样式的简单问题。
我为表格解决方案添加了一个简单的项目符号。
非常感谢，这就是我想要的。但现在我又遇到了一个问题：对于额外的样式，我需要将spans 包装在另一个 div 中，比如<li><div class="wrapper"><span>cell1</span><span>cell2</span></div><div class="wrapper">other stuff not in a table cell</div></li>。我试图添加这个，但它总是破坏布局

【解决方案2】：

一种方法是使所有 DIV 在 lis 内联块中，并为 .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>

【讨论】：