css - 显示 :table 的嵌套 div 周围的额外空间

Question

我有一个列表，我将其样式设置为表格，以便内容水平对齐。第一列包含标签，第二列包含使用 Bootstrap 的 btn-group-justified 类的按钮组 - 它也使用 display: table，因此它实际上是一个嵌套表.

问题是在第一个单元格的内容上方和第二个单元格的内容下方添加了额外的空间，此处以蓝色显示:

这是 HTML:

<ol class="table-list">
  <li>
    <div>
      <span>Row 1</span>
    </div>
    <div>
      <div class="btn-group btn-group-justified">
        <div class="btn-group">
          <button class="btn btn-default">Option A</button>
        </div>
        <div class="btn-group">
          <button class="btn btn-default">Option B</button>
        </div>
      </div>
    </div>
  </li>
</ol>

还有样式表:

ol.table-list {
  display: table;
  list-style: none;
  padding: 0;
  border-collapse: collapse;
}
ol.table-list > li {
  display: table-row;
}
ol.table-list > li > div {
  display: table-cell;
}
ol.table-list > li > div > span {
  display: inline-block;
  white-space: nowrap;
  background: white;
  padding: 6px 12px;
  line-height: 20px;
  margin: 0;
}

这在 Firefox 和 Chrome 中都会发生。当我检查单元格及其内容时，没有相关的边距也没有填充。我怎样才能摆脱那个空间？

Demo in Plunker

Answer 1

嗯，事实证明我可以通过将表格单元格的 vertical-align 设置为 baseline 以外的任何内容来修复它。

ol.table-list > li > div {
  display: table-cell;
  vertical-align: middle;
}