display: contents替代方案：语义HTML与布局融合的实现方法

首先修正你原HTML的语法错误（<li>标签未正确闭合），如果可以轻微调整结构以优化语义和布局实现，推荐使用以下结构（依然保留所有<ul>/<li>标签）：

<ul class="table-grid">
  <li class="table-row">
    <ul class="col name-col">
      <li>Bob</li>
    </ul>
    <ul class="col detail-col">
      <li>long stuff here, wow so long</li>
    </ul>
    <ul class="col action-col">
      <li>col 1</li>
    </ul>
  </li>
  <li class="table-row">
    <ul class="col name-col">
      <li>Jerry</li>
    </ul>
    <ul class="col detail-col">
      <li>short</li>
    </ul>
    <ul class="col action-col">
      <li>col 1</li>
    </ul>
  </li>
</ul>

如果必须严格保留你原有的嵌套结构，那可以给名字文本添加一个包裹元素（比如<span>），再通过CSS表格布局实现对齐：

<ul class="table-like">
  <li class="name-item">
    <span class="name-text">Bob</span>
    <ul class="details">
      <li>long stuff here, wow so long</li>
      <li>col 1</li>
    </ul>
  </li>
  <li class="name-item">
    <span class="name-text">Jerry</span>
    <ul class="details">
      <li>short</li>
      <li>col 1</li>
    </ul>
  </li>
</ul>

接下来是核心CSS实现（兼容到IE8，完全满足display: contents未普及前的场景）：

方案一：调整结构后的三列表格布局 #

/* 外层ul模拟表格容器 */
.table-grid {
  display: table;
  width: 100%;
  list-style: none;
  padding: 0;
  margin: 0;
  border-collapse: collapse; /* 可选，合并单元格边框 */
}

/* 每个li模拟表格行 */
.table-row {
  display: table-row;
}

/* 每个列的ul模拟表格单元格 */
.col {
  display: table-cell;
  vertical-align: top; /* 控制垂直对齐方式，可选top/middle/bottom */
  padding: 8px;
  border: 1px solid #eee; /* 可选，添加边框方便查看布局 */
}

/* 给不同列设置宽度（可选） */
.name-col { width: 15%; }
.detail-col { width: 70%; }
.action-col { width: 15%; }

/* 去掉列内ul的默认样式 */
.col ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

方案二：保留原嵌套结构的布局 #

/* 外层ul模拟表格容器 */
.table-like {
  display: table;
  width: 100%;
  list-style: none;
  padding: 0;
  margin: 0;
  border-collapse: collapse;
}

/* 每个name-item模拟表格行 */
.name-item {
  display: table-row;
}

/* 名字文本和详情ul都模拟表格单元格 */
.name-text, .details {
  display: table-cell;
  vertical-align: top;
  padding: 8px;
  border: 1px solid #eee;
}

/* 详情ul内部再模拟表格，让两个li横向排列为单元格 */
.details {
  display: table;
  width: 100%;
}

.details li {
  display: table-cell;
  padding: 0 8px;
}

/* 强制详情列的宽度统一（可选，确保所有行的详情列对齐） */
.details li:first-child {
  width: calc(100% - 80px); /* 给第二列预留固定宽度 */
}

这两种方案都完全保留了<ul>标签的语义，不需要依赖display: contents，且兼容性覆盖绝大多数旧浏览器，是display: contents普及前的可靠实现方式。

内容的提问来源于stack exchange，提问作者pondermatic