如何强制 html 表的 "td" 元素中的单独元素以内联方式显示(从左到右)？

Question

我正在更新一个旧的 ASP.NET Web Forms应用程序，我的小组以前只在IE上支持该应用程序，以与现代浏览器(Chrome，Firefox等(兼容。除其他问题外，我在应用程序加载时生成的某个表的单个"td"元素中显示的图标(碰巧也是链接(的方式方面遇到了一个小问题。图标是指向与表格的每个条目/行相关的各种选项的链接。

在 IE 上，图标从左到右内联排列。 但在其他浏览器上，图标是垂直堆叠的。 我被告知要使样式与IE中的外观保持一致。

我认为这将是一个更改一些CSS的简单问题，但到目前为止，我还没有能够让它工作。我所说的图标是元素的子项，要么是元素，要么是元素(然后它们有自己的 img 子项(，所以我尝试了

td img {
display: inline-block;
}
td a {
display: inline-block;
}

但这根本没有效果。

html(一旦生成(的结构类似于

(within table, body, row...)
<td>
<img src="icon1.gif">
<a href=JavaScript:editThisEntry(entryNumber)>
<img src="icon2.gif">
</a>
<a href=JavaScript:doADifferentEdit(entryNumber)>
<img src="icon3.gif">
</a>
</td>

因此，预期结果：元素中的三个图标排成一行(并且 td 足够宽以容纳(。

实际：三个带有 a 的图标堆叠在一起，使每一行从上到下"胖"，并甩掉了桌子的外观。

我对这个东西很陌生，所以我觉得我错过了一些简单的东西，但我没有通过谷歌找到我的确切问题的描述。任何帮助表示赞赏，谢谢！

Answer 1

谢谢大家。好的建议。最终，pcalkins的响应对我有用，但我不得不稍微调整一下才能将其添加到我的CSS样式表中。 我最终使用了这个：

td {
white-space: nowrap;
}

Answer 2

尝试添加

table {
table-layout: fixed;
}
td a, td img {
display:inline-block;
vertical-align:middle;
}

Answer 3

td { display： flex; }

可能是最好的解决方案，因为它将适用于现代浏览器，但在 IE 11 之前不受 IE 支持。