如何移除列表项首个子级表格的空白且保持文本位置？

你遇到的问题有两个核心原因：

• 你使用的CSS选择器li > table:first-child不生效，因为<table>并非第二个<li>的第一个子元素——它前面存在空白文本节点（HTML里的换行与缩进）；
• 设置display: inline-table会将表格转为行内块元素，导致文本xyz与表格同行显示。

无需修改HTML结构，用以下CSS即可解决：

/* 定位第二个列表项，消除内部空白文本节点的占位 */
li:nth-child(2) {
  font-size: 0;
}

/* 恢复表格和文本的正常字体大小 */
li:nth-child(2) table,
li:nth-child(2) {
  font-size: 1rem;
}

/* 保持表格为块级元素，确保文本在下方，同时移除表格默认边距 */
li:nth-child(2) table {
  display: block;
  margin: 0;
}

原理说明 #

1. 给第二个<li>设置font-size: 0，能让内部的空白文本节点（换行、缩进）不再占据空间，从而消除表格上方的空白区域；
2. 恢复表格和<li>的字体大小，避免内容显示异常；
3. 让表格保持display: block，确保xyz自动换行到表格下方，符合你的布局需求。

如果页面默认字体大小不是1rem，可根据实际情况调整font-size的数值。

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