在句子中插入HTML表单元格

Question

有没有一种方法可以让HTML表单元格在正常的文本流中与使用CSS的文本内联，使文本显示在周围文本的基线处？

简单地使所有表元素内联会使文本向下移动，如以下示例所示，这是不可取的。

table,
table > tbody,
table > tbody > tr,
table > tbody > tr > td {
display: inline;
}
table > tbody > tr > td {
padding: 0px;
margin: 0px;
}

<div style="width: 40em;">
A table containing
<table>
<tbody>
<tr>
<td>possibly multiple cells</td>
</tr>
<tr>
<td>containing potentially a high amount of text that should not be shifted down</td>
</tr>
<tbody>
</table>
below the baseline.
</div>

Answer 1

要实现您想要做的事情，您应该向每个有问题的表元素添加vertical-align: baseline;。

此外，您不需要使用祖先的层次结构来针对每个元素。这就足够了：

table,
tbody,
tr,
td {
display: inline;
padding: 0;
vertical-align: baseline;
}

<div style="width: 40em;">
A table containing
<table>
<tbody>
<tr>
<td>possibly multiple cells</td>
</tr>
<tr>
<td>containing potentially a high amount of text that should not be shifted down</td>
</tr>
<tbody>
</table>
below the baseline.
</div>