css - 如何将 Input 和 Image 元素保持在同一行

Question

我有一个包含很多列的表格。其中一列包含一个单元格，其中包含“input”和“img”元素。当表格有足够的空间时，“input”和“img”元素出现在同一行。当表格被压扁时，这两个元素最终会出现在不同的行上。我想确保这两个元素永远不会在两条线上结束。

这是我的 HTML:

<td>
    <input type="text" /><a href="#"><img src="..." /></a>
</td>

我试过在“img”元素上使用“float:left”和“float:right”。这样做并没有改变 'img' 元素在下面这一行的事实。它只改变元素是在第二行的左侧还是右侧。也许我遗漏了什么？

Answer 1

您可以使用 white-space CSS 属性:

td { white-space: nowrap; }

不过，我的建议是对列宽更加严格。为该列提供足够高的宽度，以便浏览器在确定表格布局时不会“折叠”它。