javascript - 列表元素中的表格导致换行

Question

我有一个简单的片段:

<ul>
    <li>
        <table>
            <tr>
                <td>construct</td>
                <td>
                    <button>-</button>
                </td>
            </tr>
        </table>
    </li>
</ul>

事实是，当在 chrome 中查看时 <li>显示为 2 行而不是 1 行。

<li> 中似乎添加了一个新行/换行符之前<table>标记所以而不是显示:

* <table>

它显示:

*
<table>

这有道理吗？!

我已经尝试了多种显示样式组合，但似乎无法找出为什么会发生这种情况？我知道这与删除时的缩进标记/列表样式有关，list-style-type:none ，<li>将在 1 行上正确显示，但在使用缩进标记时无法使其工作？

Answer 1

尝试将以下规则添加到表格的 css 样式中(我建议在标记中使用 id 或类以将其与其他表格元素区分开来)

table {
  display:inline-table;
  vertical-align:middle
}

下面的演示

table {
  display:inline-table;
  vertical-align:middle
}

<ul>
    <li><table>
            <tr>
                <td>construct</td>
                <td>
                    <button>-</button>
                </td>
            </tr>
        </table>
    </li>
</ul>

注意:在 chromium 版本 49.0.2623.108 中进行测试