Question

我有一个简单的代码段：

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

事情是，当用铬合金查看时，<li>会显示超过2行而不是1行。

似乎在<li>代码之前的<table>添加了新的广告/换行符，而不是显示：

* <table>

显示：

*
<table>

如果有意义的话？！

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

Answer 1

默认表样式在其前面有换行符，您可以使用CSS覆盖它。

table {
    display: inline-table;
    vertical-align: text-top;
}

请注意display: inline-block;和display: inline-table;之间存在差异，但对于简单的样式，它似乎会产生相同的效果。

CSS Display Property
CSS Vertical-Align Property

Answer 2

尝试将以下规则添加到您的表格的css样式中（我建议您使用标记的ID或类来区分它与其他表格元素）

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

下面的演示

＆＃13;

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

＆＃13;

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

＆＃13;

NB：在铬版本49.0.2623.108中进行了测试

Answer 3

好的，一如既往......如果没有yz，就不可能做到！

以下是我将在我的通用CSS文件中坚持的内容：

li > table{
    display:inline-table;
    vertical-align:top;
}

有5个可用的顶点：

1，顶部。
2，text-top。
3，中 4，底部。
5，文字底部。

虽然[1＆amp; 2]＆amp; [4＆amp; 5]实际上是相同的，每个都将对齐表＆amp;标记相对于<li>。

列表元素中的表导致换行

3 个答案: