表格单元格间距被空格打破：nowrap答案

【问题标题】：Table cell spacing broken by white-space: nowrap表格单元格间距被空格打破：nowrap
【发布时间】：2015-09-10 22:09:51
【问题描述】：

我有一个表格，其中每个单元格都包含一个文本输入。在文本输入旁边，我有一个跨度。我希望这个跨度作为标签位于文本输入右侧。

每个单元格的 HTML 结构很简单：

<td>
    <div>
        <input type="text" />
        <span>A</span>
     </div>
</td>

如果我在输入和跨度之间不留空白，它实际上可以按我的意愿工作，但我宁愿不必在我的 HTML 中写一大段长线（jsfiddle 中的表 3）。

我添加了一个换行符，这显然很糟糕（表 2），因为跨度然后进入下一行。

我想我可以通过对 div 应用 nowrap 来解决这个问题，但这也很糟糕（表 1），因为出于某种原因，我不明白表格单元格的大小不再正确。

我的问题是：为什么会发生这种情况，最好的解决方法是什么？

https://jsfiddle.net/e01azjoc/

【问题讨论】：

jsfiddle.net/77v9hjhr 或jsfiddle.net/pqx1nzm3“慢”评论

标签： html css

【解决方案1】：

谁让你把margin-left: -1; 放到你的span 来解决问题？
位置 absolute 应该用于您的 SPAN 内的位置 relative 父 div

现在这个例子对每个单元格都一样Demo

.inputCell {         /* The DIV inside your TD */
    position:relative;
}

.cellLabel {        /* The SPAN to overlay INPUT */
    position:absolute;
    top:3px;
    right:3px;
}

此外，由于我认为应该能够在这些输入中输入一些文本，因此您显然不希望 SPAN 的 "A" 覆盖任何输入的文本。在这种情况下，为输入添加一些正确的填充 - 这将允许您 SPAN 的文本永远不会覆盖输入值（使其不可读）

坦率地说，我建议您简单地将跨度留在输入旁边，只需删除输入边框。 Demo

【讨论】：